Question

这很常见，就像你在这里点击stackoverflow上的收件箱一样。我将调用该对话框或任何打开的东西。

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

您创建了一个不可见的叠加层，其中只有您打开的元素有更大的zindex，你可以通过单击关闭你的 thing 覆盖
点击文档上的活动，点击您是否点击了您的商品或其外部，在这种情况下您关闭商品。

在任何一种情况下，我都希望使用ng-class来添加/删除显示/隐藏事物的类。

现在我如何使用angular进行此操作，因此它可以用于我可能添加的任何组件（事物）。这不像我有单个模态，我可能有相当多的不同组件，具有不同的html结构，定位和东西。

哪种方法会更好，记录事件，重叠或其他什么？

由于angular实际上没有对dom的任何引用，因此文档方法可能是个问题，因为我无法确定是否点击了thing元素？除非我给每个的东西同一个类......

叠加方法不需要任何对dom元素的引用。

这两种方法都需要在rootScope上使用唯一的var来使ng-class工作..这会带来是否使用ng-class或自定义的问题。

无论如何只是把我的想法抛在那里，也许我从一开始就认为这是错的，有没有人以前处理过这个问题？

Answer 1

我之前处理过类似问题的方法是使用inheritedData与点击处理程序进行通信，无论它是否进入该事物：

在事物的自定义指令中，使用jqLite数据向元素添加数据变量，比如说element.data('myThing',true)。如果要区分该事物的多个实例，则可能需要使用一些唯一生成的密钥。
在同一个自定义指令中，在document.body上的click事件处理程序中，您可以检查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

中看到

Angular.js关闭，点击任何地方但在元素上

1 个答案: