模板内的函数被多次调用(Angular JS)

Question

今天我不得不修复由此代码引起的性能问题:注意在模板内部调用的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来修复它,现在它正常工作,但我没有弄清楚为什么这个函数被调用了很多次.有没有关于双向数据绑定的东西？

Answer 1

通常建议使用这样$watch的场景.由于您绑定了一个函数{{updateStats()}},它将在每个摘要周期执行.

因此,无论何时调用摘要周期,它都会在您的代码中调用该函数.并且在Angular内部经常调用摘要周期.

Answer 2

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

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