Ocultar o popover do Bootstrap da UI angular ao clicar fora dele

Eu estou tentando fechar manualmente um popover bootstrap para obtê-lo para fechar quando clico em qualquer lugar no document ou body que não é o popover.

A coisa mais próxima que eu encontrei para conseguir isso é criar uma diretiva ( encontrei esta resposta ), mas isso é para um gatilho manual se uma variável for verdadeira ou falsa .

Alguém poderia me ajudar a descobrir como fechar se eu clicar em qualquer coisa que não seja o popover?

Não me importo de usar o jQuery $(document).click(function(e){}); Eu não tenho ideia de como terminar.

 
+

Normalmente popover-trigger="focus" faria o truque, mas meu popover contém conteúdo que precisa ser clicado. Eu tenho um ng-click dentro do meu popover que é ignorado se eu usar o gatilho do foco, então estou procurando uma maneira não tão convencional de contornar isso.

EDITADO:

Demonstração Plunker

Veja como funciona (a explicação ainda longa e exaustiva):

  1. Crie uma diretiva personalizada que permita segmentar o elemento acionador.
  2. Crie uma diretiva personalizada que seja adicionada ao corpo e encontre o elemento acionador e dispare o evento personalizado quando ele for clicado.

Crie uma diretiva personalizada para segmentar o elemento acionador:

Você precisa acionar o manipulador de events personalizado do elemento que abriu o popover (na demonstração, este é o botão). O desafio é que o popover é anexado como um irmão para esse elemento e eu sempre acho que as coisas têm um potencial maior para quebrar quando você está percorrendo o DOM e esperando que ele tenha uma estrutura específica. Existem várias maneiras de segmentar o elemento acionador, mas minha abordagem é adicionar um nome de class exclusivo ao elemento (eu escolho ‘acionador’) quando você clica nele. Apenas um popover pode ser aberto por vez neste cenário, por isso é seguro usar um nome de class, mas você pode modificar para se adequar à sua preferência.

Directiva personalizada

 app.directive('popoverElem', function(){ return{ link: function(scope, element, attrs) { element.on('click', function(){ element.addClass('trigger'); }); } } }); 

Aplicado ao botão

  

Crie uma diretiva personalizada para o corpo do documento (ou qualquer outro elemento) para acionar o popover fechar:

A última peça é criar uma diretiva personalizada que localizará o elemento acionador e triggersrá o evento personalizado para fechar o popover quando o elemento ao qual ele é aplicado for clicado. Naturalmente, você deve excluir o evento de clique inicial do elemento “trigger” e todos os elementos com os quais deseja interagir no interior de seu popover. Portanto, adicionei um atributo chamado exclude-class para que você possa definir uma class que possa ser adicionada aos elementos cujos events de clique devem ser ignorados (não fazendo com que o popover seja fechado).

Para limpar as coisas, quando o manipulador de events é acionado, removemos a class do acionador que foi adicionada ao elemento acionador.

 app.directive('popoverClose', function($timeout){ return{ scope: { excludeClass: '@' }, link: function(scope, element, attrs) { var trigger = document.getElementsByClassName('trigger'); function closeTrigger(i) { $timeout(function(){ angular.element(trigger[0]).triggerHandler('click').removeClass('trigger'); }); } element.on('click', function(event){ var etarget = angular.element(event.target); var tlength = trigger.length; if(!etarget.hasClass('trigger') && !etarget.hasClass(scope.excludeClass)) { for(var i=0; i 

Eu adicionei isso à tag body para que toda a página * atue como pano de fundo para o popover:

  

E adicionei a class exclude à input no popover:

  

Então, há alguns ajustes e pegadinhas, mas vou deixar isso para você:

  1. Você deve definir uma class de exclusão padrão na function de link da diretiva popover-close, no caso de uma não estar definida.
  2. Você precisa estar ciente de que a diretiva popover-close está vinculada a um elemento, então se você remover os estilos que eu defini nos elementos html e body para dar 100% de altura, você pode ter 'áreas mortas' dentro de sua viewport se seu conteúdo não for preenchê-lo.

Testado no Chrome, Firefox e Safari.

ATUALIZAÇÃO : Com a versão 1.0, adicionamos um novo acionador chamado outsideClick que fechará automaticamente o popover ou a dica de ferramenta quando o usuário clicar fora do popover ou da dica de ferramenta.

A partir da versão 0.14.0, adicionamos a capacidade de controlar programaticamente quando sua dica de ferramenta / popover é aberta ou fechada por meio dos atributos tooltip-is-open ou popover-is-open .

Desde o Angular UI Bootstrap 1.0.0, há um novo acionador do outsideClick para dicas de ferramentas e popovers (introduzidos nesta solicitação pull . No Angular UI Bootstrap 2.0.0, o popover-trigger foi modificado para usar expressões angulares ( Changelog ), de modo que O valor deve ser colocado entre aspas. Este código funcionará com as versões atuais do angular-ui:

 
+

Este código funcionará com versões antigas do Angular UI Bootstrap (antes de 2.0.0):

 
+

Existe uma propriedade chamada popover-trigger qual você pode atribuir o focus da propriedade.

  

Isso faz o truque! 🙂

Editar: para permitir que a dica de ferramenta seja clicada e não acione o foco perdido, considere uma abordagem semelhante a esta

Se você quiser trabalhar em ângulo, tente criar sua própria definição de gatilho. Sugestões sobre como fazer isso podem ser encontradas aqui .

popover-trigger="'outsideClick'" Isso funcionará perfeitamente.

popover-trigger="outsideClick" Isso não vai.

Eu demorei um dia para entender porque não estava funcionando para mim.

É porque eles estão verificando isso usando este código, "if (trigger === 'outsideClick')"

O que você está procurando é

  

Da documentação – O gatilho do outsideClick fará com que o popover alterne ao clicar e se esconda quando qualquer coisa for clicada.

Você pode usar:

Marcação

 

Javascript

  

Eu tive o mesmo problema e popover-trigger="'outsideClick'" funcionou para mim. Interessante que a documentação não afirmou esse problema.

Angular boostrap ui nova versão 1.x tendo facilidade para fora clique lateral function. atualize-o para a nova versão.

  

seu trabalho para mim.

O foco não funcionará se houver um botão de envio ou um evento de clique no popover. Então, essa maneira útil de fazer.

E sobre a opção ‘ outsideClickno método setTriggers$ uibTooltipProvider ‘. A documentação diz “O acionador outsideClick fará com que a dica de ferramenta alterne em um clique e oculte quando qualquer outra coisa for clicada.” Documentação

Adicione o comportamento onclick="void(0)" a alguns dos seus elementos de fundo que, quando tocados, eliminam os popovers.

Dê uma olhada em https://github.com/angular-ui/bootstrap/issues/2123