angularjs - イベントに基づいて bs-popover を非表示にする方法

Question

angularjsでクリックすると（メニューとして）コンテンツを表示するためにbs-popoverを使用しています。しかし、ブラウザ ウィンドウのどこかをクリックしたときに、このポップオーバー メニューを非表示にする必要があります。そのようなイベントでそれを却下したい。どうやってやるの？

Answer 1

@Jay Shukla が提供するソリューションは機能しません。

ポップオーバーをトリガーする要素の "$event.stopPropagation()" は、ポップオーバー内をクリックしても閉じるのを止めません。ポップオーバー内で何らかの操作がある場合、これは問題になります。

これは機能します：

angular.module('yourApp')
.directive('closePopovers', function ($document, $rootScope, $timeout) {
return {
  restrict: 'EA',
  link: function (scope, element, attrs) {
    $document.on('click', function (ev) {

      var targetElem = angular.element(ev.target);

      if (targetElem.data('toggle') !== 'popover' 
      && targetElem.parents('[data-toggle="popover"]').length === 0 
      && targetElem.parents('.popover').length === 0) {

        $('.popover').each(function () {
            var $this = $(this);
            var scope = $this.scope();
            scope.$apply(function () {
              scope.$hide();
            });
          }
        );
      }
    });
  }
};
});

あなたの体に：

ポップオーバーをトリガーする要素で:

<button data-toggle="popover" [other data elements here] bs-popover>Toggle popover</button>