Schließen Sie alle Angular JS Bootstrap Popovers mit einem Klick auf dem Bildschirm?

Question

Ich verwende die Angular-Direktiven für Bootstrap.

Ich habe einen popover wie in ihrem Beispiel:

<button popover="Hello, World!" popover-title="Title" class="btn btn-default ng-scope">Dynamic Popover</button> 

Es schließt sich, wenn Sie auf die Taste erneut klicken. Ich möchte es schließen - und alle anderen offenen Popovers - wenn der Benutzer irgendwo klickt.

Ich sehe keine integrierte Möglichkeit, dies zu tun.

Answer 1

Eine Idee ist, dass Sie den Auslöser so ändern können, dass die Maus ein- und ausgeht, wodurch sichergestellt wird, dass nur ein Popover gleichzeitig angezeigt wird. Das Folgende ist ein Beispiel dafür:

<button popover="I appeared on mouse enter!" 
     popover-trigger="mouseenter" class="btn btn-default" 
     popover-placement="bottom" >Hello World</button> 

Sie können sehen, dies funktioniert in this plunker. Sie finden die gesamte Liste der Tooltip-Trigger auf der angular bootstrap site (Tooltips und Popovers haben die gleichen Trigger-Optionen). Viel Glück!

Answer 2

Was Sie sagen, es ist eine Standardeinstellungen des popover, aber man kann es mit der Funktion Trigger steuern, durch Unschärfe im zweiten Argument des Abzugs setzen wie diese popover-trigger="{mouseenter:blur}"

Answer 3

die gleiche Anforderung war, und dies ist wie wir es getan haben: Zuerst wir Bootstrap geändert, in der Link-Funktion des Tooltip:

if (prefix === "popover") { 
    element.addClass('popover-link'); 
} 

Dann führen wir einen Click-Handler auf den Körper wie so:

$('body').on('click', function(e) { 
    var clickedOutside = true; 
    // popover-link comes from our modified ui-bootstrap-tpls 
    $('.popover-link').each(function() { 
     if ($(this).is(e.target) || $(this).has(e.target).length) { 
      clickedOutside = false; 
      return false; 
     } 
    }); 
    if ($('.popover').has(e.target).length) { 
     clickedOutside = false; 
    } 
    if (clickedOutside) { 
     $('.popover').prev().click(); 
    } 

}); 

Answer 4

Diese Funktionsanfrage wird verfolgt (https://github.com/angular-ui/bootstrap/issues/618). Ähnlich wie AET Antwort, können Sie das tun, was in der Feature-Anfrage als eine Behelfslösung empfohlen:

$('body').on('click', function (e) { 
    $('*[popover]').each(function() { 
     //Only do this for all popovers other than the current one that cause this event 
     if (!($(this).is(e.target) || $(this).has(e.target).length > 0) 
      && $(this).siblings('.popover').length !== 0 
      && $(this).siblings('.popover').has(e.target).length === 0)     
     { 
      //Remove the popover element from the DOM   
      $(this).siblings('.popover').remove(); 
      //Set the state of the popover in the scope to reflect this   
      angular.element(this).scope().tt_isOpen = false; 
     } 
    }); 
}); 

(Quelle: vchatterji Kommentar in Feature-Request oben erwähnt)

Die Feature-Anfrage hat auch eine nicht -jQuery Lösung sowie das plnkr: http://plnkr.co/edit/fhsy4V

Answer 5

angular.element(document.body).bind('click', function (e) { 
    var popups = document.querySelectorAll('.popover'); 
    if(popups) { 
     for(var i=0; i<popups.length; i++) { 
      var popup = popups[i]; 
      var popupElement = angular.element(popup); 

      if(popupElement[0].previousSibling!=e.target){ 
       popupElement.scope().$parent.isOpen=false; 
       popupElement.remove(); 
      } 
     } 
    } 
}); 

Answer 6

Danke Lauren Campregher, dies gearbeitet.

Ihr Code ist der einzige, der auch die Statusänderung für den Bereich ausführt.

Nur so konfiguriert, dass wenn Sie auf das Popover klicken, das letztere schließt.

Ich habe Ihren Code gemischt, und jetzt funktioniert es auch, wenn Sie in das Popover klicken.

Ob das System, ob durch popover-Vorlage getan,

Um es erkennbar Pop-up mit popover-Template fertig zu machen, habe ich Klassen popover- Körper und popover-Titel, entsprechend dem Kopf und der Körper der popover mit der Vorlage gemacht, und dafür sorgen, er zeigt direkt auf sich im Code platzieren:

angular.element(document.body).bind('click', function (e) { 
    var popups = document.querySelectorAll('.popover'); 
    if(popups) { 
     for(var i=0; i<popups.length; i++) { 
      var popup = popups[i]; 
      var popupElement = angular.element(popup);   

      var content; 
      var arrow; 
      if(popupElement.next()) { 
       //The following is the content child in the popovers first sibling 
       // For the classic popover with Angularjs Ui Bootstrap 
       content = popupElement[0].querySelector('.popover-content'); 


       // For the templating popover (popover-template attrib) with Angularjs Ui Bootstrap    
       bodytempl = popupElement[0].querySelector('.popover-body'); 
       headertempl= popupElement[0].querySelector('.popover-title'); 


       //The following is the arrow child in the popovers first sibling 
       // For both cases. 
       arrow = popupElement[0].querySelector('.arrow');    
      } 



      if(popupElement[0].previousSibling!=e.target && e.target != content && e.target != arrow && e.target != bodytempl && e.target != headertempl){ 
       popupElement.scope().$parent.isOpen=false; 
       popupElement.remove(); 
      } 

     } 
    } 
}); 

jemals einen guten Tag, danke Lauren, danke AngularJS, danke soviel Stapel Familie!

Aktualisiert:

ich alle Hinzufügen von zusätzlichen Steuer aktualisiert. Die Elemente innerhalb des Popover wurden von der Steuerung ausgeschlossen (z. B. ein Bild, das in den Hauptteil des Popover eingefügt wurde). Dann klickte man auf das selbe.

Ich löste den Befehl von API Node.contains, integriert in einer Funktion, die wahr oder falsch zurückgibt.

Jetzt mit jedem Element nach innen gesetzt, führen Sie die Kontrolle und hält die popover geöffnet, wenn Sie im Inneren klicken:

// function for checkparent with Node.contains 
function check(parentNode, childNode) { if('contains' in parentNode) {  return parentNode.contains(childNode); } else {  return parentNode.compareDocumentPosition(childNode) % 16; }} 

angular.element(document.body).bind('click', function (e) { 
    var popups = document.querySelectorAll('.popover'); 
    if(popups) { 
     for(var i=0; i<popups.length; i++) { 
      var popup = popups[i]; 
      var popupElement = angular.element(popup);   

      var content; 
      var arrow; 
      if(popupElement.next()) { 
       //The following is the content child in the popovers first sibling 
       // For the classic popover with Angularjs Ui Bootstrap 
       content = popupElement[0].querySelector('.popover-content'); 


       // For the templating popover (popover-template attrib) with Angularjs Ui Bootstrap    
       bodytempl = popupElement[0].querySelector('.popover-body'); 
       headertempl= popupElement[0].querySelector('.popover-title'); 


       //The following is the arrow child in the popovers first sibling 
       // For both cases. 
       arrow = popupElement[0].querySelector('.arrow');    
      } 

     var checkel= check(content,e.target); 

      if(popupElement[0].previousSibling!=e.target && e.target != content && e.target != arrow && e.target != bodytempl && e.target != headertempl&& checkel == false){ 
       popupElement.scope().$parent.isOpen=false; 
       popupElement.remove(); 
      } 

     } 
    } 
}); 

Answer 7

 angular.element(document.body).bind('click', function (e) { 
      var popups = document.querySelectorAll('.popover'); 
      if (popups) { 
       for (var i = 0; i < popups.length; i++) { 
        var popup = popups[i]; 
        var popupElement = angular.element(popup); 
        console.log(2); 
        if (popupElement[0].previousSibling != e.target) { 
         popupElement.scope().$parent.isOpen = false; 
         popupElement.scope().$parent.$apply(); 
        } 
       } 
      } 
     }); 

Answer 8

I für gleiche

angular.element(document.body).popover({ 
     selector: '[rel=popover]', 
     trigger: "click" 
    }).on("show.bs.popover", function(e){ 
     angular.element("[rel=popover]").not(e.target).popover("destroy"); 
     angular.element(".popover").remove(); 
    });