javascript - 更新 Angular $interval 中的变量会导致其他函数运行

Question

我已经尽量简化了这个问题，所以忽略这个例子是多么毫无意义:)

我有一个显示计时器的指令。它每 500 毫秒递增一次计数器。

JS

.directive('testTimer', function($interval) {
    return {
        link: function(scope, el, attrs) {
            var count;
            scope.counter = 0;
            count = $interval(tick, 500);

            function tick() {
                scope.counter++;
            }
        }
    }
})

HTML

<test-timer>{{counter}}</test-timer>

每次 tick() 运行时，我的 Controller 中的函数也会运行

.controller('testController', function($scope) {
    $scope.array = [
        1,2,3
    ]

    $scope.getNumber = function(num) {
        console.log('Why does this run every time tick runs?')
        return num;
    }

})

HTML

<div ng-controller="testController">
<div ng-repeat="number in array">
    {{getNumber(number)}}
</div>


<test-timer>{{counter}}</test-timer>

我试过使用 invokeApply = false在我的 $interval 中，但是 DOM 中的计数器没有更新。如何防止我的指令一遍又一遍地运行我的 Controller 中的其他函数，但仍然让它更新 View 中的计数器？

这是一个显示问题的 JS fiddle (查看控制台日志) https://jsfiddle.net/marmite/nf4c18tx/

Answer 1

这是预期的行为。

Angular 运行称为 digest loop检测和传播变化。更新 {{ getNumber(number) }} 返回值的唯一方法是评估函数调用 getNumber(number) 因为 Angular 不知道你是否已经是否改变了它的返回值。摘要循环由 $interval() 调用这是标准 JavaScript setInterval() 的包装器。

您可以修改您的代码以仅使用 setInterval()，您可以看到 getNumber() 不再被调用，因为没有任何东西可以触发摘要循环。

您更新的演示:https://jsfiddle.net/7Ljus149/1/

回答您的问题:不要从函数返回数值。我不知道你的用例是什么，但我认为你不需要在 {{ }} 中使用函数调用。它还可能导致严重的性能问题，通常最好避免它。