ng重复调用控制器功能的次数太多

ng-repeat call controller function too many times

本文关键字：太多 功能 控制器 调用 ng      更新时间：2024-07-03

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

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

很久以前-我的自定义指令。它执行个事件。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。我需要为每个格式化程序函数编写指令吗？

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

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

注意绑定一次仅适用于Angular 1.3+以上

Angular不知道prepareAlertValue（）内部发生了什么，所以它需要在每个摘要上调用此函数

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

问题是，每当消化周期发生时，它就会被调用。无论何时进行更改，例如触发点击事件（通过Angular with ng-click），或更改events数组，都会触发$digest循环。当触发$digest时，函数会在重新评估所有角度观察者时重新评估，并递增callPrepareAlertValueCount。因此，它发生的次数比events.length多得多。

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

下面是一个简单的Fiddle演示。

您可以停止在ng repeat中调用控制器函数。或者，如果你想在循环中调用控制器函数（ng repeat），那么（在你的控制器中）使用适当的条件，如果为true，那么如果你不调用该函数，那么它每次都会调用控制器函数。

相关文章：