模板内的函数被多次调用（Angular JS）答案

【问题标题】：Function inside a template is called many times (Angular JS)模板内的函数被多次调用（Angular JS）
【发布时间】：2016-05-03 14:02:10
【问题描述】：

今天我不得不修复由这段代码引起的性能问题：注意模板内部调用的updateStats

<script type="text/ng-template" id="entityGrouper">

<section>

<div>
<ul ng-click="hideEntityBox = !hideEntityBox">
<li>
{{ entityNode.name }}
</li>
<li ng-repeat="breadcrumbItem in entityNode.breadcrumb">
{{ breadcrumbItem }}
</li>
</ul>
{{ updateStats(entityNode) }}
<span ng-include="'/mypath/views/resume.html'"></span>
</div>

<div>

<div ng-repeat="entityNode in entityNode.group" ng-include="'entityGrouper'"></div>
<div ng-repeat="entity in entityNode.group" ng-include="'entityBox'"></div>

</section>

</script>

模板使用：

<div ng-repeat="entityNode in entityNode.group" ng-include="'entityGrouper'"></div>

调试这段代码后，我发现这个函数被调用的次数比数组大小要多得多（我的数组有4个对象，这个函数被调用了100多次），甚至鼠标悬停也调用了这个函数。我通过在模板中放置一个 ng-init 解决了这个问题，现在它可以正常工作了，但我不明白为什么这个函数被调用了这么多次。双向数据绑定有什么问题吗？

【问题讨论】：

你是在递归调用同一个模板吗？在模板中再次调用了<div ng-repeat="entityNode in entityNode.group" ng-include="'entityGrouper'"></div>

标签： javascript angularjs ng-template

【解决方案1】：

对于这种情况，通常建议使用$watch。由于您正在绑定一个函数{{updateStats()}}，它将在每个摘要周期执行。

因此，在您的代码中，每当调用摘要循环时，它也会调用该函数。 Angular 内部经常调用摘要循环。

【讨论】：

【解决方案2】：

发生这种情况不是因为双向数据绑定（它适用于表单输入），而是因为角度变化检测。 Angular 会定期检查绑定到模板的任何值是否已更改，如果是，则更新其在视图中的值。通常，它由用户生成的事件触发。为了检查updateStats(entityNode) 的值是否改变，Angular 会评估它，这会导致性能下降。

要解决此问题，您可以使用前面提到的一次性绑定updateStats(entityNode)如果结果设置一次并且以后永远不会更改。我想，这就是你的情况，你已经将评估移至ng-init。对于随时间更新的值，最好在entityNode 中创建一个单独的属性，如entityNode.stats，将其显示在模板中，并仅在必要时在控制器或服务中运行updateStats(entityNode)。通过这样做，您将防止在每个摘要周期运行updateStats(entityNode)（您已经看到了频率），从而提高了您的应用程序的性能。

【讨论】：

【解决方案3】：

你看到的是一个摘要循环的结果。

添加:: 将调用该函数一次/一次性绑定。

{{ ::updateStats(entityNode) }}

【讨论】：

具体做什么 :: ？
:: 提供一次性绑定。如果在表达式前面加上 this，它将在第一个摘要后停止运行或重新计算。更多信息一次性绑定documentation部分。