javascript - Angular : What is the right way to close dropdown/popover element on outside mouse click?

Question

如果我想为应该在此事件后关闭的 popover/tooltip/dropdown 创建指令，我应该在哪里设置外部点击的监听器？

Answer 1

我们为此创建了一个非常简单的指令:

'use strict';

yourmodule.directive('clickOutside', function($parse, $document){
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      var fn = $parse(attr.clickOutside);
      $document.bind('click', clickOutsideHandler);
      element.bind('remove', function () {
        $document.unbind('click', clickOutsideHandler);
      });

      function clickOutsideHandler(event) {
        event.stopPropagation();
        var targetParents = $(event.target).parents();
        var inside = targetParents.index(element) !== -1;
        var on     = event.target === element[0];
        var outside = !inside && !on;

        if (outside) scope.$apply(function() {
          fn(scope, {$event:event});
        });
      }

    }
  };
});

像这样使用它:

<div click-outside="handleClick($event)">...</div>