Angular.js在元素上的任意位置单击关闭

一尘不染

Angular.js在元素上的任意位置单击关闭

angularjs

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

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

你创建一个无形的覆盖，但只有用户打开该元素具有更大的zIndex以及您关闭 的事情 上叠加通过点击
点击文档事件，而你检查在点击你是否点击你的事还是境外，在这种情况下，你闭上你的事。

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

现在，我将如何使用angular做到这一点，以便可以在我可能添加的任何组件上使用。
好像我没有单一模式，我可能有很多不同的组件，它们具有不同的html结构，位置和内容。

记录事件，覆盖或其他完全哪种方法更好？

由于angular并没有真正引用dom，因此文档方法可能是一个问题，对，因为我无法完全检查是否单击了thing元素？除非我给每一 件事都 上同一堂课..

另一方面，重叠方法不需要引用dom元素。

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

无论如何，只是把我的想法扔在那里，也许我从一开始就在考虑它是错误的，以前有人处理过吗？

阅读 338

2020-07-04

共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

2020-07-04