Angular.js 通过单击元素以外的任意位置关闭

这是很常见的事情，就像你在 stackoverflow 上点击收件箱一样。我将调用该对话框或任何打开的内容thing.

现在我知道有两种方法可以解决这个问题，

1. 您创建了一个不可见的覆盖层，其中只有您打开的元素 有更大的 zindex，然后你关闭你的thing通过单击 覆盖
2. 文档上的单击事件，然后在单击时检查您是否单击了您的内容或其外部，在这种情况下，您关闭了您的内容thing.

无论哪种情况，我都希望使用ng-class添加/删除将显示/隐藏的类thing.

现在我将如何使用角度来做到这一点，以便它可以用于我可能添加的任何组件（事物）。这不像我有单一的模态，我可能有很多不同的组件，具有不同的 html 结构、定位和东西。

哪种方法更好，记录事件、覆盖还是完全其他的方法？

由于 Angular 并没有真正对 dom 进行任何引用，因此文档方法可能是一个问题，对吧，因为我无法完全检查我是否正在单击 thing 元素？除非我愿意付出一切thing同一个班级..

另一方面，覆盖方法不需要任何 dom 元素的引用。

两种方法都需要在 rootScope 上有一个唯一的变量ng-class工作..这带来了是否使用的问题ng-class或者一些定制的东西..

不管怎样，只是把我的想法抛在那里，也许我从一开始就想错了，以前有人处理过这个吗？

我之前处理类似问题的方法是使用inheritedData与点击处理程序进行通信，无论它是在事物内部还是外部：

• 在事物的自定义指令中，使用 jqLit​​e 数据向元素添加数据变量，例如element.data('myThing',true)。如果您想区分事物的多个实例，您可能需要使用一些唯一生成的密钥。

• 在同一个自定义指令中，在 document.body 上的单击事件处理程序中，您可以检查angular.element(event.target).inheritedData('myThing')

使用此技术的示例指令如下

app.directive('thing', function($document,$window) {
  return {
    restrict: 'E',
    template: '<div><span>Inner thing</span></div>',
    replace: true,
    link: function(scope,element) {
      element.data('thing',true);

      angular.element($document[0].body).on('click',function(e) {
        var inThing =  angular.element(e.target).inheritedData('thing');
        if (inThing) {
          $window.alert('in');
        } else {
          $window.alert('out');
        }
      })
    }
  }
});

可以在这个 Plunker 中看到http://plnkr.co/edit/bRDLcLoesM7Z0BIxKxYu?p=preview