javascript - Angular 始终运行检查

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 上设置值(如果您使用“ Controller 为”)，特别是如果表达式位于重复中并且最终会得到很多重复值。

我认为在这种情况下，您尚未发布的其他一些代码可能正在触发摘要循环。同样，解决此问题的方法是仅在表达式可能更改时才计算表达式并将结果存储在作用域中。