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

Question

这很常见,比如你在这里点击stackoverflow上的收件箱.我会打电话给那个对话框或任何被打开的东西.

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

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).如果要区分该事物的多个实例,则可能需要使用一些唯一生成的密钥.

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