ng-include 被调用得太频繁了答案

【问题标题】：ng-include is being called far too oftenng-include 被调用得太频繁了
【发布时间】：2023-03-29 16:15:01
【问题描述】：

我发现当我使用 ng-include 时，它被调用的频率太高了。

每次单击Nothing 按钮之一或更改视图或在输入框中键入内容时，getView 都会运行多次。更改视图时最多 6 次。基本上做任何改变$scope 的事情都会产生对getView 的调用。

我创建了一个 plunker 来显示我所描述的行为：plnkr.co

这是正常行为吗？有没有办法让它只运行一次？我担心我可能会因此而失去性能。

我的密码：

index.html

<body ng-app="includeExample">
  <div ng-controller="ExampleController">
    <div class="row">
      <input type="text" ng-model="unrelated">
    </div>
    <div class="row">
      <tabset>
        <tab heading="View 1">
          <ng-include src="getView('template1')"></ng-include>
        </tab>
        <tab heading="View 2">
          <ng-include src="getView('template2')"></ng-include>
        </tab>
      </tabset>
    </div>
  </div>
</body>

Script.js

 angular.module('includeExample', ['ngAnimate', 'ui.bootstrap'])
   .controller('ExampleController', ['$scope',
     function($scope) {
       $scope.getView = function(filename) {
         console.log("getView " + new Date());
         return filename + ".html";
       };
     }
   ]);

模板1.html

Content of template1.html
<button type="button" class="btn btn-primary" ng-click="">Nothing</button>

【问题讨论】：

是的，这是正常的。见github.com/angular/angular.js/issues/1305

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

每次运行摘要时，Angular 都会调用您的 getView 方法，以确保值没有改变。这是角度如何将模型和视图绑定在一起的“魔法”的一部分。如果您查看开发工具的网络选项卡，您会发现每次摘要运行时浏览器实际上都没有检索到模板。知道这是摘要的实际工作方式 - 您应该相应地开发代码，在不直接绑定到视图的方法中运行密集操作！

有关摘要本身的更多信息，请参阅：

http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/
https://docs.angularjs.org/guide/scope（搜索“范围生命周期”）
https://www.ng-book.com/p/The-Digest-Loop-and-apply/

希望有帮助！

【讨论】：

【解决方案2】：

是的，每次你做任何事情时，angularJS 都会经过getView()。一个好的第一次迭代是将它分配给一个 json 对象，而不是使用 get 方法。实际上，最好不要在 html 中使用任何 get 类型的方法。然后如果你真的希望它不改变，你可以删除2路绑定（Render value without data-binding）。

【讨论】：