Verwenden Sie outsideClick, um benutzerdefiniertes Direktiven-Popover zu schließen

Question

Ich habe ein Popover als benutzerdefinierte Anweisung, die geöffnet wird, wenn auf ein Symbol geklickt oder auf es geklickt wird. Wenn das Symbol angeklickt wird, bleibt das Popover stehen und wird geschlossen, wenn Sie erneut auf das Symbol klicken. Nun möchte ich das Popover nach dem Klicken schließen, indem ich irgendwo anders als auf das Popover klicke. Unten ist mein Code ...

MY CUSTOM RICHTLINIE

(function() { 
    'use strict'; 

    angular.module('frontend.core.directives') 
    .directive('myPopover', [ 
     function directive() { 
     return { 
      restrict: 'E', 
      templateUrl: '/frontend/core/directives/my-popover/my-popover.html', 
      scope: { 
      trigger: '@', 
      title:'@' 
      }, 
      transclude: true, 
      link: function (scope, elm, attrs) { 
      //Need to hide content first 
      elm.hide(); 
      //plugin binder 
      $(scope.trigger).popover({ 
       html: true, 
       trigger: 'hover click', 
       placement: 'auto', 
       content: function() { 
       return elm.html(); 
       }, 
       title: function() { 
       return scope.title; 
       } 
      }); 

      } 
     }; 
     } 
    ]); 
}()); 

MY HTML

<div> 
<i id="touch-details" class="fa fa-info-circle"></i> 
<my-popover trigger="#touch-details" my-popover-trigger="outsideClick" title="Details"> 
    <span> 
     Inside of my popover 
    </span> 
</my-popover> 
</div> 

Bitte sagen Sie mir, was ich die popover tun müssen, um zu ermöglichen, wenn sie außerhalb geklickt schließen.

Answer 1

Eigentlich war die Antwort bereits erstellt. Ich brauchte nur ein wenig um die Winkelsyntax anzupassen. Also wurde das '$' in 'angle.element' geändert. Zum Beispiel ...

$('body').on('click' 

entspricht

angular.element('body').on('click' 

Siehe Link ...

http://jsfiddle.net/raving/jpsmegvL/

Answer 2

Versuchen Sie, das $ -Dokument in Ihre Anweisung einzuschleusen und zu kontrollieren, falls das Wetter sich innerhalb des div befindet, der das Popup oder außerhalb des div hält. So etwas wie folgt aus:

angular.module('frontend.core.directives') 
    .directive('myPopover', [ 
     function directive($document) { 

.......

$document.on('click', function(event){ 

    event.originalEvent //This holds among other things where the click was made. If click was not made in the div containing the popup, then take an action 
}); 

Hoffe, es hilft

Answer 3

Es gibt eine Eigenschaft namens popover-Trigger, der Sie die Eigenschaft Fokus zuweisen können, die funktioniert wie Sie wollen, auf Blur-Event. Darüber hinaus mit ui-Bootstrap können Sie bequem die popover und Tooltips von Bootstrap mit AngularJS wie in diesem Beispiel verwenden:

<button popover-placement="top" 
     popover-title="Hello Word!" 
     popover-class = "someClass" 
     popover-trigger = "focus" 
     uib-popover="I appeared on blur!" 
     type="button" class="btn btn-default"> 
     Check 
</button>