为什么要两次应用ng-style函数？

Question

我有一个像这样的有角度的应用程序：

angular.module('ngStyleApp', [])

.controller('testCtrl', function($scope) {
   $scope.list = [1,2,3];
   $scope.getStyles = function(index) {
       console.log('getting styles for index ' + index);
       return {
           color: 'red'
       };
   };
});

带有相应的标记：

<div ng-app="ngStyleApp">
    <ul ng-controller="testCtrl">
        <li ng-repeat="value in list" ng-style="getStyles($index)">
            {{value}}
        </li>
    </ul>
</div>

可见的输出是三个红色列表项，如预期的那样。但是该语句总共记录了6次到控制台，这意味着该视图被渲染了两次：

getting styles for index 0
getting styles for index 1
getting styles for index 2
getting styles for index 0
getting styles for index 1
getting styles for index 2

为什么？

• JSFiddle

Answer 1

Angular $digest循环至少两次评估ngStyle属性-
一次获取值，一次检查其是否已更改。实际上，它一直在迭代直到值稳定为止，因此有可能多次检查该值。

这是一张图片来说明这一点：

这是一篇很好的博客文章，阐述了这一点：
角度摘要博客

实际上，请尝试使用StackOverflow的引号，说得很好：

如果在$ digest期间对监视的函数进行了评估（如果它们在$
digest之前已更改），则Angular知道更改可能会波及到其他监视的函数（也许已更改的变量在另一个受监视的函数中使用）。因此，每只手表都要重新评估（也称为脏处理），直到没有一只手表导致改变为止。因此，通常您会看到每个摘要有2次调用来监视函数，有时甚至更多（在10个循环中最多10次调用会放弃并报告错误，称其无法稳定）。