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

Angular get a list of all elements which share directive

本文关键字：元素 列表 Angular 共享 指令 获取      更新时间：2023-09-26

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

我有一个用于多个元素的指令，并且根据每个使用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 直接选择元素，但由于几个原因，这不太理想。

创建一个服务，将其注入到所需的每个指令中，然后可以迭代它们。

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

编辑

您可以创建一个包含所有元素的全局数组。现在，您可以遍历所有这些内容。这是一个笨蛋。

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

使用 jquery has-attribute selector：

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

并迭代元素：

elements.each(function(index, elem) {
   ...
});
相关文章：