Question

我有这个popover并显示它，我点击图标。要隐藏它，同样的事情。当我点击页面上的任何其他位置时如何关闭它？代码：

<span uib-popover-template="'app/components/popover/popover.template.html'" popover-placement="right"
              popover-trigger="outsideClick"><i class="fa fa-info-circle"></i></span>

谢谢！

Answer 1

来自documentation of AngularUI's popover：

outsideClick触发器会导致弹出窗口在点击时切换，并在点击任何其他内容时隐藏。

<强> JSFiddle demo here.

Answer 2

$(window).click(function() {
//Hide the pop if visible
});

//stop propagation of document body
$('#pop').click(function(event){
event.stopPropagation();
});

Answer 3

angular
    .module('modulename')
    .factory('clickAnywhereButHereService', function($document){
      var tracker = [];

      return function($scope, expr) {
        var i, t, len;
        for(i = 0, len = tracker.length; i < len; i++) {
          t = tracker[i];
          if(t.expr === expr && t.scope === $scope) {
            return t;    
          }
        }
        var handler = function() {
          $scope.$apply(expr);
        };

        $document.on('click', handler);

        // IMPORTANT! Tear down this event handler when the scope is destroyed.
        $scope.$on('$destroy', function(){
          $document.off('click', handler);
        });

        t = { scope: $scope, expr: expr };
        tracker.push(t);
        return t;
      };
    });

     angular
    .module('modulename')
    .directive('clickAnywhereButHere', function($document, clickAnywhereButHereService){
      return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
          var handler = function(e) {
            e.stopPropagation();
          };
          elem.on('click', handler);

          scope.$on('$destroy', function(){
            elem.off('click', handler);
          });

          clickAnywhereButHereService(scope, attr.clickAnywhereButHere);
        }
      };
    });`

这会奏效。在span上使用此指令。

点击任何地方时如何隐藏弹出窗口？

3 个答案: