Angular获取共享指令的所有元素的列表答案

【问题标题】：Angular get a list of all elements which share directiveAngular获取共享指令的所有元素的列表
【发布时间】：2015-01-05 13:44:03
【问题描述】：

如何获取共享指令的所有元素的数组，以便我可以迭代它们并让它们彼此做不同的事情？

我有一个用于多个元素的指令，根据每个使用restrict: 'A' 的指令的属性值，我需要这些指令在链接函数中相互对话并以不同的方式相互影响.

我尝试过使用：

link : function(scope, elem, attr) {
    attr.forEach(function(e, i) {
        if(attr[i] === 'menu') {
            //do something
        } else if (attr[i] === 'scroll') {
            //do something else
        }
    });
}

但我将 forEach 作为未定义的函数。我也尝试了一个简单的 for 循环，但两者都有：

elem.length

和

attr.length

给我未定义的。

请注意，我不想使用具有不同逻辑的不同指令，因为我需要每个元素实际执行特定于其他元素的操作。

我可以只使用 jQuery 直接选择元素，但由于几个原因，这不太理想。

【问题讨论】：

标签： javascript arrays angularjs dom angularjs-directive

【解决方案1】：

您创建一个service，将其注入到您想要的每个指令中，然后您可以对其进行迭代。

这就是您跨指令和跨控制器共享数据的方式。

编辑

您可以创建一个包含所有元素的全局数组。现在您可以遍历它们。这是plunker。

app.directive('thing', function(){
  var elements = [];
  return {
    restrict: 'E',
    link: function(scope, element, attrs){
      element.text('hello');
      elements.push(element);
      console.log(elements);
    }
  };
});

【讨论】：

指令中没有内置任何内容可让您访问共享指令的所有元素？
我相信this post 就是您要找的。看第二个答案。我没有找到任何关于内置替代品的文档。
hmmm 似乎没有帮助...显然，我已经知道您可以访问链接函数中的元素，但是如何同时访问链接中的所有指令元素无需查询 dom 的功能？

【解决方案2】：

使用 jquery has-attribute 选择器：

var menuElements = $('[menu]');
var scrollElements = $('[scroll]');

并遍历元素：

elements.each(function(index, elem) {
   ...
});

【讨论】：