为什么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中的这句话:

当评估观察的函数时(在$摘要期间),如果它们中的任何一个已经从之前的$摘要改变,那么Angular知道该改变可能会波及其他观察的函数(可能更改的变量用于另一个观察的函数).因此,每个手表都会被重新评估(也称为脏处理),直到所有手表都没有变化.因此,通常你会看到2个调用每个摘要的观察函数,有时甚至更多(通过它的10个循环中最多10个放弃并报告错误,表示它无法稳定).

(参考这里)