javascript - 当每次不同的值是预期行为时如何防止 "Error: $rootScope:infdig"

Question

我正在使用 AngularJS(使用 Aria、Animate、Material、Messages、Sanitize 和 Route)处理一个页面，一切正常，但我遇到了一些问题。 Angular 喜欢在每次刷新页面时函数返回的值都不同时抛出“错误:$rootScope:infdig”，但这正是我编写的一个函数的目的。

代码:

<script>

    angular.module('tht', ['ngMaterial', 'ngSanitize', 'ngMessages', 'ngAnimate', 'ngAria'])

    .controller('MainController', ['$scope', '$rootScope', function($scope, $rootScope) {
        $rootScope.version = '0.1';
        $rootScope.name = 'tht';
        $rootScope.author = 'D3add3d';
        $rootScope.year = '2016';
        $scope.jokes = ["We ate a bunch of doritos and now the page is blank...", 
                        "Sometimes it just looks like this...", 
                        "Kappa, Kappa, Kappa, Kappa...", 
                        "This text changes every time I refresh the page, weird huh o_O", 
                        "We are out of doritos :-/", 
                        "Powered by your satisfaction... wait", 
                        "Instead of working on this page, I'm writing these jokes #procrastination", 
                        "Have a hug or two *hugs*", 
                        "<3", "<3~~~", 
                        "This joke is so simple... return array[Math.floor(Math.random() * array.length)];", 
                        "Go eat some chocolate, it helps ;)", 
                        "I love you all :-* <3", "[~~HUG~~]", 
                        "[?BUG?]"];
        $scope.randomJoke = function() {
            return $scope.jokes[Math.floor(Math.random() * $scope.jokes.length)]; //function that returns different value (almost) every time it is called
        }
    }]);

</script>

HTML:

<div ng-controller="MainController" ng-hide>

    <header>Hello, this is <b>{{name}}</b>, version <b>{{version}}</b>
    <article><br>{{randomJoke()}}</article> <!-- THIS IS WHAT CAUSES THE ERROR -->
    </header>
    <footer>&copy; <b>{{author}}</b>, {{year}}</footer>

</div>

所以问题是:在我希望每次值都不同的情况下，有什么办法可以避免这个错误吗？

Answer 1

这行不通，因为插值绑定(bind) {{ }} 的计算方式。

插值绑定(bind)不会在每次重新加载页面时评估一次。它们在每个 $digest 周期被评估，以确定它们的值是否需要更新，这是 Angular 双向绑定(bind)如何工作的基石。不幸的是，在 Interpolation Binding 中执行的函数会触发另一个 $digest 循环，以确定函数调用是否进行了任何需要更新其他绑定(bind)的更改。

在这种情况下，这会产生一些问题，因为 $digest 永远不会稳定。每次调用 $digest 都会生成一个新的 randomJoke，这会导致 $digest 再次触发。如果查看 infdig 错误，您实际上可以看到 在最近 5 次迭代中触发的观察者 在 oldVal 和 中显示了 5 个不同的笑话>新值。

infdig 错误实际上是一种故障保护，angular 在 10 次迭代后停止摘要，以确保您不会完全锁定浏览器。实际上，您可以以这种方式使用代码，但应用程序的性能会因此变得非常差。

更好的方法是绑定(bind)到分配给函数调用结果的变量，该函数调用在 Controller 初始化期间计算一次。