Angularjs:为什么重复做太多的工作

Angularjs: why is ng-repeat doing too much work?

本文关键字：太多 工作 为什么 Angularjs      更新时间：2023-09-26

我不明白为什么ng repeat似乎在做不必要的工作。

我已经实现了一个小的导航菜单示例来展示我的意思。我创建了一个包含控制器（NavCtrl）的Angular模块，其中I:

  1. 在$scope中填充导航菜单数据，以及
  2. 创建一个函数，该函数根据是否选择了指定的菜单项来返回类。注意：这很像这个Stackoverflow问题中的代码，它看起来是实现基于哈希的导航菜单概念的好方法（如果你知道的话，请给我一个更好的概念！）

我已经创建了一个我的例子的JSFiddle。

我的问题是：为什么ng重复循环被执行三次？注意我的Javascript方法navClass中的控制台日志行。当我在Chrome中运行它并简单地加载HTML时，我会得到以下输出：

evaluating route: home, against page: home testmod.js:29
evaluating route: home, against page: teams testmod.js:29
evaluating route: home, against page: events testmod.js:29
evaluating route: home, against page: venues testmod.js:29
evaluating route: home, against page: settings testmod.js:29
evaluating route: home, against page: home testmod.js:29
evaluating route: home, against page: teams testmod.js:29
evaluating route: home, against page: events testmod.js:29
evaluating route: home, against page: venues testmod.js:29
evaluating route: home, against page: settings testmod.js:29
evaluating route: home, against page: home testmod.js:29
evaluating route: home, against page: teams testmod.js:29
evaluating route: home, against page: events testmod.js:29
evaluating route: home, against page: venues testmod.js:29
evaluating route: home, against page: settings testmod.js:29

在我看来，ng重复循环运行了三次，在我的5项示例菜单列表中产生了15行输出，尽管我的标记看起来只应该迭代一次：

     <div>
        <ul ng-controller="navCtrl">
           <li ng-repeat="navLink in navLinks"> <a href='#/{{navLink.Title}}' ng-class="navClass('{{navLink.Title}}')">{{navLink.LinkText}}</a> </li>
        </ul>
     </div>

非常感谢解释或建设性的批评！

由于AngularJS双向数据绑定，日志记录运行了3次：$apply（）和$digest（）。$digest至少运行两次以检查是否有任何更改。肮脏的检查是有代价的；（

一个更好的方法是，我们可以使用ng类：，而不是使用函数表达式

 <ul ng-controller="navCtrl">
    <li ng-repeat="navLink in navLinks"> <a href='#/{{navLink.Title}}' ng-class="myVar" ng-click="myVar = 'active'">{{navLink.LinkText}} </a> 
    </li>
 </ul>

希望这能有所帮助！

相关文章：