javascript - modal - ui bootstrap tpls 2.5 0

Ocultar el popover Bootstrap de UI angular al hacer clic fuera de él

Question

Estoy intentando cerrar manualmente un popover bootstrap para cerrarlo cuando hago clic en cualquier parte del document o body que no sea popover.

Lo más parecido que he encontrado para lograr esto es crear una directiva ( encontré esta respuesta ) pero esto es para un disparador manual si una variable es verdadera o falsa .

¿Alguien podría ayudarme a encontrar la manera de cerrarlo si hago clic en cualquier cosa que no sea el popover?

No me importa usar jQuery $(document).click(function(e){}); Simplemente no tengo ni idea de cómo llamar de cerca.

<div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

Normalmente popover-trigger="focus" haría el truco, sin embargo mi popover contiene contenido que necesita ser cliqueado. Tengo un ng-click dentro de mi popover que se ignora si uso el desencadenador de enfoque, entonces estoy buscando una forma no tan convencional de evitarlo.

Answer 1

¿Qué pasa con la opción '' outsideClick '' en el método '' $ uibTooltipProvider '' setTriggers ? La documentación dice: "El disparador outsideClick hará que la información sobre herramientas se active al hacer clic y se oculte cuando se haga clic en cualquier otra cosa". Documentation

Answer 2

Agregue el comportamiento onclick="void(0)" a algunos de sus elementos de fondo que cuando se toquen eliminarán los popovers.

Eche un vistazo a https://github.com/angular-ui/bootstrap/issues/2123

Answer 3

Angular boostrap ui nueva versión 1.x que tiene facilidad para salir de la función de clic lateral. actualizarlo a la nueva versión.

<button uib-popover-template="updatePassword.templateUrl" popover-title="Update Password" popover-trigger="outsideClick" popover-placement="right" popover-append-to-body="true">Click here</button>

es trabajo para mi

el enfoque no funcionará si se envía un botón o un evento de clic en popover. así que esta útil forma de hacerlo

Answer 4

Desde Angular UI Bootstrap 1.0.0, hay un nuevo disparador outsideClick para información sobre herramientas y elementos emergentes (introducido en esta solicitud de extracción . En la interfaz de usuario angular Bootstrap 2.0.0, el popover-trigger se ha modificado para usar expresiones angulares ( Changelog ), por lo que el valor debe ponerse entre comillas. Este código funcionará con las versiones actuales de angular-ui:

<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="''outsideClick''"
    popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

Este código funcionará con versiones anteriores de Angular UI Bootstrap (anterior a 2.0.0):

<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="outsideClick"
    popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

Answer 5

Hay una propiedad llamada popover-trigger que puede asignar el focus propiedad.

<button 
      popover-placement="right" 
      popover="On the Right!" 
      popover-trigger="focus" 
      class="btn btn-default">
   Right
</button>

Esto hace el truco! :)

Editar: para permitir que se haga clic en la información sobre herramientas y no desencadene el enfoque perdido, considere un enfoque similar a este

Si quieres que funcione en angular, intenta crear tu propia definición de disparador. Sugerencias sobre cómo hacer eso se pueden encontrar aquí .

Answer 6

Lo que estás buscando es

<button
      popover-trigger="outsideClick" 
      class="btn btn-default">
   Right
</button>

De la documentación: el disparador outsideClick hará que el popover se active al hacer clic y se ocultará cuando se haga clic en cualquier otra cosa.

Answer 7

Puedes usar:

Margen

<div ng-app="Module">
    <div ng-controller="formController">
        <button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus" 
          popover-placement="left" type="button" class="btn btn-default">
             Popover With Template
        </button>

        <script type="text/ng-template" id="myPopoverTemplate.html">
            <div>
                <span>prasad!!</span>
            </div>
        </script>
    </div>
</div>

Javascript

<script type="text/javascript">
    var app = angular.module("Module", [''ui.bootstrap'']);
    app.controller("formController", [''$scope'', function($scope) {
        $scope.dynamicPopover = {
            templateUrl: ''myPopoverTemplate.html''
        };
    }]);
</script>

Answer 8

Tuve el mismo problema y popover-trigger="''outsideClick''" funcionó para mí. Es interesante que la documentación no establezca este problema.

Answer 9

popover-trigger="''outsideClick''" Esto funcionará perfectamente.

popover-trigger="outsideClick" Esto no lo hará.

Tomé 1 día para resolver por qué no funcionaba para mí.

Es porque ellos verifican esto usando este código, "if (trigger === ''outsideClick'')"

Answer 10

ACTUALIZACIÓN : con la versión 1.0, hemos agregado un nuevo activador llamado outsideClick que cerrará automáticamente el popover o la información sobre herramientas cuando el usuario haga clic fuera del popover o tooltip.

Comenzando con la versión 0.14.0, hemos agregado la capacidad de controlar mediante programación cuándo su tooltip / popover está abierto o cerrado a través de los atributos tooltip-is-open o popover-is-open .

Answer 11

EDITADO:

Demostración Plunker

Así es como funciona (la explicación aún larga y exhaustiva):

1. Cree una directiva personalizada que le permita orientar el elemento disparador.
2. Cree una directiva personalizada que se agrega al cuerpo y encontrará el elemento desencadenante e iniciará el evento personalizado cuando se haga clic en él.

Crea una directiva personalizada para apuntar al elemento disparador:

Debe desencadenar el controlador de eventos personalizado desde el elemento que abrió el popover (en la demostración este es el botón). El desafío es que el popover se agrega como un hermano a este elemento y siempre pienso que las cosas tienen un mayor potencial para romperse cuando se atraviesa el DOM y se espera que tenga una estructura específica. Hay varias formas en que puede orientar el elemento desencadenante, pero mi enfoque es agregar un nombre de clase único al elemento (elijo ''desencadenar'') cuando hace clic en él. Solo se puede abrir un popover a la vez en este escenario, por lo que es seguro usar un nombre de clase, pero puede modificarlo según sus preferencias.

Directiva personalizada

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

Aplicado al botón

<button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" class="btn btn-default" popover-elem>Popover With Template</button>

Cree una directiva personalizada para el cuerpo del documento (o cualquier otro elemento) para activar el popover close:

La última pieza es crear una directiva personalizada que ubique el elemento desencadenante y active el evento personalizado para cerrar el popover cuando se haga clic en el elemento al que se aplica. Por supuesto, debe excluir el evento de clic inicial del elemento "desencadenar" y cualquier elemento con el que desee interactuar en el interior de su popover. Por lo tanto, agregué un atributo llamado exclude-class para que pueda definir una clase que pueda agregar a los elementos cuyos eventos de clic se deben ignorar (sin causar que el popover se cierre).

Para limpiar las cosas, cuando se activa el controlador de eventos, eliminamos la clase de desencadenante que se agregó al elemento desencadenante.

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<tlength; i++) {
            closeTrigger(i)
          }
        }
      });
    }
  };
});

Agregué esto a la etiqueta del cuerpo para que toda la página * actúe como telón de fondo descartable para el popover:

<body popover-close exclude-class="exclude">

Y, agregué la clase de exclusión a la entrada en el popover:

<input type="text" ng-model="dynamicPopover.title" class="form-control exclude">

Entonces, hay algunos ajustes y errores, pero te lo dejo:

1. Debe establecer una clase de exclusión predeterminada en la función de enlace de la directiva popover-close, en caso de que uno no esté definido.
2. Debes ser consciente de que la directiva popover-close está ligada a elementos, por lo que si eliminas los estilos que configuré en los elementos html y body para darles un 100% de altura, podrías tener ''áreas muertas'' dentro de tu ventana gráfica si tu contenido no funciona no lo llene

Probado en Chrome, Firefox y Safari.