Question

我正在使用bs-popover在angularjs中点击（作为菜单）显示我的内容。但是当我在浏览器窗口中的某个位置单击时，我需要隐藏此弹出菜单。我想让它在这种类型的事件上被驳回。我怎么能这样做？

Answer 1

您需要为此编写指令。

yourApp.directive('bndocumentclick',
 function($document,$rootScope,$timeout) {
  return {
    restrict: 'EA',
     link : function(scope, element, attrs) {
        $document.on("click", function(ev) {
           // Do stuff here to remove your popover.
        }
     }
 }
});

HTML

<body bndocumentclick>

和

<div bs-popover ng-click="$event.stopPropagation()">

你需要使用，因为你不想在用户点击popover内部时关闭你的popover。

Answer 2

@Jay Shukla提供的解决方案并不起作用。

＆＃34; $ event.stopPropagation（）＆＃34;当你在popover内点击时触发弹出窗口的元素不会阻止它关闭..如果你在popover中有一些交互，这将是一个问题。

这有效：

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>

如何根据事件隐藏bs-popover

2 个答案: