Javascript 模板中的函数被多次调用（Angular JS）

今天，我必须修复由以下代码引起的性能问题：注意模板内部调用的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>

{{entityNode.name}


{{breadcrumbItem}}


{{updateStats（entityNode）}

模板使用：

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

---

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

对于这种情况，通常建议使用

$watch

。由于您正在绑定一个函数

{{updateStats（）}

，它将在每个摘要周期上执行

---

因此，在您的代码中，每当调用摘要循环时，它也会调用函数。摘要循环通常在角循环中被称为内部循环

你看到的是消化循环的结果

添加

：：

将调用函数一次/一次性绑定

---

{{：：updateStats（entityNode）}

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

updateStats（entityNode）

的值是否更改，Angular会对其进行计算，从而导致性能下降

---

若要解决此问题，您可以使用前面提到的一次性绑定

updateStats（entityNode）

，前提是结果设置了一次并且以后不会更改。我想，这就是您的情况，您已经将计算移到了

nginit

。对于随时间更新的值，最好在

entityNode

中创建一个单独的属性，如

entityNode.stats

，将其显示在模板中，并仅在必要时在控制器或服务中运行

updateStats（entityNode）

。通过这样做，您将防止在每个摘要周期上运行

updateStats（entityNode）

（您已经看到了运行的频率），从而提高应用程序的性能

您是否递归调用同一个模板？在模板内部再次进行了

调用What:：Juckly do？

：

提供一次性绑定。如果在表达式前面加上此前缀，它将在第一个摘要后停止运行或重新计算。更多信息请参阅的一次性绑定部分。