AngularJS:在鼠标点击外部时关闭下拉/弹出窗口元素的正确方法是什么?

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

本文关键字：元素 窗口 是什么 方法 鼠标 外部 AngularJS      更新时间：2023-09-26

如果我想为弹出窗口/工具提示/下拉菜单创建指令，应该在此事件后关闭，我应该在哪里设置外部点击的监听器?

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

'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>
相关文章：