如何防止“错误:$ rootScope:infdig"；当每次预期的值不同时的行为 [英] How to prevent "Error: $rootScope:infdig" when different value each time is intended behavior
问题描述
我正在使用AngularJS(带有Aria，Animate，Material，Messages，Sanitize和Route)在页面上工作，一切工作都很好，但是我有一个问题.每次刷新页面时，函数返回的值都不相同时，Angular会抛出错误:$ rootScope:infdig"，但这正是我编写的一个函数应做的事情.
I'm working on a page using AngularJS(with Aria, Animate, Material, Messages, Sanitize and Route), everyting is working fine but I have a bit of a problem. Angular likes to throw "Error: $rootScope:infdig" when the value returned by function is different every time the page is refreshed but that is what one function I wrote is exactly meant to do.
代码:
<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>© <b>{{author}}</b>, {{year}}</footer>
</div>
所以问题是:在我每次都希望值都不同的情况下，有什么方法可以避免此错误?
So the question is: Is there any way to avoid this error in a case where I want the value to be different every time?
推荐答案
由于评估插值绑定 {{}} 的方式，因此无法使用.
This won't work, because of how Interpolation Bindings {{ }} are evaluated.
每次重新加载页面时，插值绑定不会评估一次.每个 $ digest 周期都会对它们进行评估，以确定是否需要更新其值，这是角度双向绑定如何工作的基石.不幸的是，在插值绑定内部执行的函数会导致另一个 $ digest 循环触发，以确定该函数调用是否进行了更改，从而需要更新其他绑定.
Interpolation Bindings are not evaluated once per page reload. They are evaluated every $digest cycle, to determine if their value needs to be updated, which is the cornerstone of how angular two way binding works. Unfortunately, functions which are executed inside an Interpolation Binding cause another $digest cycle to fire, in order to determine if the function call has made any changes requiring other Bindings to be updated.
在这种情况下，这会引起一些问题，因为 $ digest 永远不会稳定.每次对 $ digest 的调用都会生成一个新的 randomJoke ，这会导致 $ digest 再次触发.如果您查看 infdig 错误，则实际上可以看到在最近5次迭代中触发的 Watchers ，其中显示了 oldVal 和
In this case, that creates a bit of an issue, since the $digest will never be stable. every call to the $digest generates a new randomJoke, which causes the $digest to fire again. If you review the infdig error, you can actually see the Watchers fired in the last 5 iterations showing 5 different jokes in the oldVal and newVal.
infdig 错误实际上是一种故障保护，在10次迭代后angular会停止摘要，以确保您不会完全锁定浏览器.实际上，您可以 以这种方式使用代码，但结果会使应用程序的性能非常差.
The infdig error is actually a failsafe, angular stops the digest after 10 iterations, to ensure that you don't lock the browser up completely. In practice, you could use the code this way, but the application would suffer from some very poor performance as a result.
更好的方法是绑定到分配给函数调用结果的变量，该变量在控制器初始化期间进行一次评估.
The better method is to bind to a variable that is assigned to the result of your function call, which is evaluated once, during controller initialization.
这篇关于如何防止“错误:$ rootScope:infdig"；当每次预期的值不同时的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
