Question

在我们当前的Angular应用程序中，我发现了一个奇怪的行为。例如：

angular.module('app.book')
    .directive('ddBook', function () {
        return {
            scope: {},
            replace: true,
            controller: 'BookCtrl',
            controllerAs: 'ctrl'
        };
    })
    .controller('BookCtrl',
        [
            '$scope',
            function ($scope) {


                $scope.isPrebookingAllowed = function () {
                    //if I set here break point it will always be hited
                    return true;
                };

            }
        ]);

该指令的一些HTML

<div ng-show="isPrebookingAllowed()">
   //something goes here
</div>

问题是，如果我在isPrebookingAllowed方法上设置断点，它将始终点击它。它的接缝就像我有无限循环一样触发了这个指令的摘要循环，但是我没有对UI做任何改动。

Answer 1

Angular将在每个摘要周期更新DOM。在可能的情况下，它会通过观察要更改的特定项目来优化此功能。所以如果你这样做：

<div ng-show="ctrl.isPrebookingAllowed">
   //something goes here
</div>

它只会检查ctrl.isPreBookingAllowed的值是否有变化，如果没有改变则没有任何反应。

但是如果你调用一个函数，Angular无法判断结果是否已经改变，所以每次都会调用它：

<div ng-show="ctrl.isPrebookingAllowed()">
   //something goes here
</div>

如果代码很短，大量的呼叫可能无关紧要。否则，尝试在范围内或控制器上设置代码集值（如果使用'controller as'），特别是如果表达式在重复内部并且最终会有很多这样的值。

我认为在这种情况下，您未发布的其他一些代码可能会触发摘要循环。同样，修复此问题的方法是仅在表达式可能更改并将结果存储在范围内时评估表达式。

Angular始终运行检查

1 个答案: