Angular.js任何地方点击关闭，但在元素上 [英] Angular.js closing with click anywhere but on the element

问题描述

这是pretty平常的事情，就像如果你在收件箱中点击这里这里计算器。我会调用该对话框或任何被开了的的事情的。

It's pretty common thing, like if you click on inbox here here on stackoverflow. I'll be calling that dialog or whatever gets opened a thing.

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

Now there are two ways I know of to deal with this,

1. 您创建，你只打开元素一个无形的叠加
   有较大的zIndex的，你通过点击关闭您的的事情的
   覆盖


2. 单击文档上的事件，你检查一下后，是否点击了你的事还是境外，在这种情况下，你闭上你的的事情的

1. you create an invisible overlay where only the element you opened has bigger zindex, and you close your thing by clicking on the overlay
2. click event on the document, and you check upon clicking whether you clicked on your thing or outside it, in which case you close your thing.

在这两种情况下我最好喜欢用纳克级添加/删除类，将显示/隐藏的的事情的

In either case I'd ideally like to use ng-class to add/remove class that would show/hide the thing.

现在我将如何做到这一点有棱有角，因此它可以在任何组件（事）使用我想补充。它不象我有一个模式，我可能有好几个不同的组件，用不同的HTML结构，定位和东西。

Now how would I do this with angular, so it could be used on any component(thing) I might add. It's not like I have single modal, I might have quite a few different components, with different html structure, positioning and stuff.

哪种办法，文档事件，重叠或东西完全都好？

Which approach would be better, document event, overlay or something completely else?

由于角并没有真正有DOM任何引用，文档的方法可能是一个问题，对不对，因为我不能完全检查我是否点击的东西元素？除非我给每一个的的事情的同一类。

Since angular doesn't really have any reference to dom, document approach could be a problem, right, since I can't quite check whether I'm clicking on the thing element? Unless I'd give every thing the same class..

在另一方面覆盖方法不需要任何引用DOM元素。

Overlay approach on the other hand doesn't require any reference to dom elements.

这两种方法都需要在rootScope一个独特的VAR为纳克级工作..这带来的问题是使用纳克级或定制的东西..

Both approaches would need a unique var at rootScope for that ng-class to work.. which bring the question whether to use ng-class or something custom..

反正只是扔我的想法在那里，也许我想它从一开始就错了，有没有人处理这之前？

Anyway just throwing my ideas out there, maybe I'm thinking about it wrong from the beginning, has anyone dealt with this before?

推荐答案

我以前是用解决这样的事情的方式 inheritedData 传达给点击处理程序是否它或缩小的事情：

The way I've tackled things like this before is using inheritedData to communicate to the click handler whether it's in or out of the thing:

• 在对事物的定制指令，数据变量添加的元素，采用jqLit​​e数据，说 element.data（'myThing'，真） 。如果你想要的东西多个实例加以区分，则可能需要使用一些独特生成的密钥。

• In the custom directive for the thing, add a data variable to the element, using jqLite data, say element.data('myThing',true) . If you want to distinguish between multiple instances of the the thing, you might need to use some uniquely generated key.

在相同的自定义指令，在document.body的Click事件处理程序，您可以检查 angular.element（event.target）.inheritedData（'myThing'）

In the same custom directive, in a click event handler on document.body, you can check angular.element(event.target).inheritedData('myThing')

这是使用此技术的一个例子指令低于

An example directive that uses this technique is below

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 <一待观察href=\"http://plnkr.co/edit/bRDLcLoesM7Z0BIxKxYu?p=$p$pview\">http://plnkr.co/edit/bRDLcLoesM7Z0BIxKxYu?p=$p$pview

and can be seen in this Plunker http://plnkr.co/edit/bRDLcLoesM7Z0BIxKxYu?p=preview

这篇关于Angular.js任何地方点击关闭，但在元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！