带有 ng-repeat 的 Angular 指令 addEventListener答案

【问题标题】：Angular Directive addEventListener with ng-repeat带有 ng-repeat 的 Angular 指令 addEventListener
【发布时间】：2026-01-09 00:25:04
【问题描述】：

我目前有一个指令，可以将一些事件侦听器添加到链接函数中的元素。

例如：

...
link: function(scope, element) {
    // this gives us the native JS object
    var el = element[0];

    el.draggable = true;

    el.addEventListener('dragstart', ...);
}
...

现在我在ng-repeat 中使用这个指令。我的问题是，这是否会为 ng-repeat 中的每个元素创建一个新的事件监听器？

如果是这样，假设我在这个 ng-repeat 中有 100 个项目，这会导致性能问题吗？

如果是这样，我可以进行哪些更改以将这些元素附加到同一个事件侦听器？

【问题讨论】：

这取决于...是什么。
您的意思是在 addEventListener 中？ el.addEventListener('dragstart', dragStartFunction, false);
dragStartFunction 是对 one 函数的引用，所以它总是相同的，只要它没有在链接函数中声明。
它实际上是在链接函数中声明的，在控制器中声明它并在链接函数中使用对它的引用会更好吗？由于指令中的控制器只加载一次。
控制器也会被实例化 100 次，但如果函数是原型的一部分，它只会存在一次。无论如何，由于事件侦听器，您不会对 100 个项目有任何性能问题。如果这是一个问题，那么您将不得不重新考虑您的解决方案并将一个侦听器附加到父元素（指令）。

标签： javascript angularjs angularjs-ng-repeat angular-directive event-listener

【解决方案1】：

是的，它会将事件添加到 ng-repeat 中的每个元素。每个附加了它的元素都会执行一次指令。侦听器本身不会导致主要的性能问题。（不超过 ng-repeat，性能不是很好）

【讨论】：