ng-repeat 调用控制器函数太多次

Question

我有下一个代码（事件是数组）：

<tr ng-repeat="event in events">
    <td>
        <span time-ago="{{event.TimestampSec}}"></span>
    </td>
    <td>
        {{prepareAlertValue(event.AlertValue)}}
    </td>
</tr>

很久以前 - 我的自定义指令。它被执行events.length次。

我的控制器：

...
window.callPrepareAlertValueCount = 0

$scope.prepareAlertValue = function(value) {
    window.callPrepareAlertValueCount++;
    if(safemineHelper.isFloat(value)) {
        value = (~~(value * 100)) / 100;
    }
    return value;
}
...

列表显示后 - 我看到 callPrepareAlertValueCount 增长。控制台日志：

 > callPrepareAlertValueCount
 < 41890
 > callPrepareAlertValueCount
 < 46150
 > callPrepareAlertValueCount
 < 480315

拜托，谁能解释一下为什么 prepareAlertValue 一直在执行。我需要为每个格式化程序函数编写指令吗？

Answer 1

Angular 不知道 prepareAlertValue() 内部发生了什么，所以它需要在每个摘要

上调用这个函数

Answer 2

callPrepareAlertValueCount 是 window 上的全局变量，每当调用 prepareAlertValue 函数时都会更新。

要点是，每当发生摘要循环时都会调用它。每当进行更改时，例如触发点击事件（通过 Angular 和 ng-click），或者更改 events 数组，都会触发 $digest 循环。当 $digest 被触发时，函数重新计算所有 angular 观察者正在重新计算，并递增 callPrepareAlertValueCount。所以它发生的次数比 events.length 多很多。

基本上，您不应该依赖于以这种方式保持计数器，因为您无法控制 $digest 循环的次数运行。

这里有一个简单的 Fiddle 来演示这一点。

Answer 3

这是正确的，无论您在 html 上绑定什么，它都会在每个摘要周期运行被 angular js 调用。

使用 {{::prepareAlertValue(event.AlertValue)}} 绑定一次指令，该指令将只执行一次该函数。

Note Bind Once only work for above Angular 1.3+

Answer 4

您可以停止在 ng-repeat 中调用控制器函数。或者如果你想在循环中调用控制器函数（ng-repeat），然后使用适当的条件（在你的控制器中），如果为真则调用函数如果你不这样做，那么它将每次调用控制器函数.

ng-repeat 调用控制器函数太多次

ng-repeat call controller function too many times

javascript

angularjs

angularjs-ng-repeat

angularjs-digest