javascript - Angular.js 通过单击元素以外的任何地方关闭

Question

这是很常见的事情，例如，如果您在 stackoverflow 上单击此处的收件箱。我会将那个对话框或任何打开的东西称为 thing。

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

1. 你创建了一个不可见的叠加层，其中只有你打开的元素具有更大的 zindex，您可以通过单击覆盖
2. 单击文档上的事件，并在单击时检查您是单击了您的东西还是单击了它之外的东西，在这种情况下，您关闭了您的东西。

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

现在我将如何使用 angular 来做到这一点，以便它可以用于我可能添加的任何组件(事物)。 这不像我有单一模态，我可能有很多不同的组件, 具有不同的 html 结构、定位和内容。

哪种方法更好，记录事件、覆盖还是完全不同的东西？

因为 angular 并没有真正引用 dom，文档方法可能是个问题，对吧，因为我不能完全检查我是否在点击 thing 元素？除非我给每个东西都上同样的课..

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

这两种方法都需要在 rootScope 中有一个唯一的 var 才能使 ng-class 工作。这带来了是使用 ng-class 还是自定义的东西的问题。

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

Answer 1

我之前处理此类问题的方法是使用 inheritedData 与点击处理程序进行通信，无论它是在事件中还是在事件之外:

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

• 在同一个自定义指令中，在 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