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

Question

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

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

我试过使用：

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 来 select 元素，但由于多种原因，这并不理想。

Answer 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);
    }
  };
});

Answer 2

使用jquery has-attribute选择器：

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

并迭代元素：

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

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

Angular get a list of all elements which share directive

javascript

arrays

dom

angularjs

angularjs-directive