angularjs的ng-click在ng-repeat中的性能

performance of angularjs ng-click inside ng-repeat

本文关键字：性能 ng-repeat ng-click angularjs      更新时间：2023-09-26

这只是一种怀疑，而不是已经证实的问题，但是……
我用knockoutjs工作了一段时间，有一个性能问题，创建大量的ko点击绑定-更好的方法是使用更少的jQuery .on('click'，…)来处理这些。

现在我要进入angularjs了我在ng-repeat中有一个ng-repeat在第二个ng-repeat中有几个按钮ng-click. 

<ul>
    <li ng-repeat="el in collection">
        <button ng-click="someFn()">click me</button>
        <button ng-click="someFn2()">click me</button>
        <button ng-click="someFn3(el)">click me</button>
    </li>
</ul>

这会创建很多点击事件绑定吗?还是angular以某种方式优化了这个?

在这种情况下几乎没有任何优化。如果你有几个嵌套的ngrepeat。应该针对哪一个进行优化?确实不容易回答。此外，重复项目可以由另一个控制器控制。

我看到了下面这个完成任务的有点粗俗的方法。
我们可以把ngClick应用到父元素上，调用一些方法并传递值来识别被点击的项目。

<ul ng-click="itemClicked(itemIdentifier)">
    <li ng-repeat="el in collection">
        <button>click me</button>
    </li>
</ul>

唯一要回答的问题是我们如何得到这个标识值。我们需要自己的指令来应用于重复的DOM元素，它将这个值附加到元素上。之后，我们可以从$event对象中获得值。

<ul ng-click="itemClicked($event.target.itemIdentifier)">
    <li ng-repeat="el in collection">
        <button click-optimiztation="el">click me</button>
    </li>
</ul>

当然，您必须检查undefined值。

这种方法必须适应你的需要，因为你想在每个重复的模板中有几个可点击的元素。尽管如此，我希望这个想法是清楚的。

相关文章：