javascript - 模板内的函数被多次调用(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 来解决这个问题，现在它可以正常工作了，但我不明白为什么这个函数被调用了这么多次。有关于双向数据绑定(bind)的东西吗？

Answer 1

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

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