Angular JS：IE 错误：达到 10 次 $digest() 迭代。中止

Posted 2023-02-22

技术标签:

【中文标题】Angular JS：IE 错误：达到 10 次 $digest() 迭代。中止【英文标题】：Angular JS: IE Error: 10 $digest() iterations reached. Aborting 【发布时间】：2012-11-30 23:43:32 【问题描述】：

我是 Angular 新手，遇到一个与 IE 相关的问题。

这是我得到的 IE 错误。

Webpage error details

User Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Timestamp: Thu, 13 Dec 2012 04:00:46 UTC


Message: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function $locationWatch() \n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) \n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() \n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) \n\t    $location.$$parse(oldUrl);\n\t   else \n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  \n\t);\n      \n\n      return changeCounter;\n    ; newVal: 7; oldVal: 6"],["fn: function $locationWatch() \n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) \n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() \n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) \n\t    $location.$$parse(oldUrl);\n\t   else \n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  \n\t);\n      \n\n      return changeCounter;\n    ; newVal: 8; oldVal: 7"],["fn: function $locationWatch() \n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) \n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() \n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) \n\t    $location.$$parse(oldUrl);\n\t   else \n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  \n\t);\n      \n\n      return changeCounter;\n    ; newVal: 9; oldVal: 8"],["fn: function $locationWatch() \n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) \n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() \n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) \n\t    $location.$$parse(oldUrl);\n\t   else \n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  \n\t);\n      \n\n      return changeCounter;\n    ; newVal: 10; oldVal: 9"],["fn: function $locationWatch() \n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) \n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() \n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) \n\t    $location.$$parse(oldUrl);\n\t   else \n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  \n\t);\n      \n\n      return changeCounter;\n    ; newVal: 11; oldVal: 10"]]
Line: 7859
Char: 6
Code: 0
URI: http://localhost:8080/__assets__/lib/angular/angular.js

除了 IE 8 和 IE 9 之外的任何其他浏览器都不会发生这种情况。

我的手表正在查看包含位置过滤器的内容过滤对象。

我的问题是为什么它不会发生在除 IE 之外的任何其他浏览器上，我应该怎么做才能摆脱它。提前致谢。

【问题讨论】：

你有没有想过那个？ 【参考方案1】：

我可以从您的错误报告中看出您有一个用于 changeCounter 变量的 $watch，以及这个观察器函数：

function $locationWatch() 
    var oldUrl = $browser.url();
    if (!changeCounter || oldUrl != $location.absUrl()) 
        changeCounter++;
        $rootScope.$evalAsync(function () 
            if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl)
                .defaultPrevented) 
                $location.$$parse(oldUrl);
             else 
                $browser.url($location.absUrl(), $location.$$replace);
                $location.$$replace = false;
                afterLocationChange(oldUrl);
            
        );
    
    return changeCounter;
;

如果 $browser.url() 不等于 $location.absUrl()，则 changeCounter 的值会增加。由于 $watch 函数只能执行 10 次更改/反应循环，因此在这 10 次迭代之后它会出错。当您更改正在观看的值时，它最终会中断。

我会记录这些值 - $location.absUrl() 和 $browser.url()，然后看看为什么在其他浏览器中匹配，但在 ie 中不匹配。

【讨论】：

感谢蒂亚戈的回复。但必须告诉你，这不是我写的函数。它是 angular.js 作为库函数提供的函数。这被 AngularJS 额外观看了。【参考方案2】：

我遇到了相同的错误问题，看起来相同。 Chrome\FF 工作正常，但 IE 失败。我点击了我的应用程序中的一些链接，有时会收到此错误，有时不会。

1) 在我看来，我有几个看起来像这样的链接：

<a href="#" ng-click="addIP(ip)">Add some IP</a>

2) 这些链接的单击处理程序将新对象添加到 IpRanges 集合中，如下所示：

$scope.IpRanges.push(ip);

3) 集合本身在视图上被 ng-repeat 绑定，我认为 IE 无法很好地处理这种情况 - 可能绑定\添加\应用事件的顺序不正确，否则......也在点击后在链接上，我将 # 符号添加到 url，有时它会闪烁，然后出现错误。所以我删除了 href 属性，一切正常：

<a href="" ng-click="addCurrentIP()">Add as allowed IP</a>

在类似情况下使用 span 或 div 可能会更好。

【讨论】：

这是爱的帖子！嘿，非常感谢！！我花了很多时间，但这解决了我的问题！删除整个 href 属性对我有用【参考方案3】：

Tiago Roldão 绝对正确。我有完全相同的问题。调试后，我在我的代码中意识到我有

location.hash = "#/app/" + id;

这会导致无限循环问题。经过一番研究，我发现了这个

$location.path("/apps/" + id);

完美解决了我的问题。

【讨论】：

为我工作！谢谢！完美！非常感谢:) 非常感谢。不知道这个我就死了【参考方案4】：

TLDR

如果你使用ui-router，那么你也可以使用

$state.go('details', id:item.ID);

背景

我使用以下功能从列表视图导航到详细信息视图，以便您可以单击列表中带有ng-click="details(item)" 的任何内容，在我的情况下为tr：

$scope.details = function (item) 
    $window.location.href = "#/details/" + item.ID;

但我在 IE 中得到了可怕的 10 $digest() iterations reached。

仅供参考

在 Tiago 的回答之后，我在 AngularJS v1.2.0rc1 angular.js line 7650 中放置了一个断点。

// update browser
var changeCounter = 0;
$rootScope.$watch(function $locationWatch() 
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) 
    changeCounter++; /* <-- breakpoint here, line 7650 */
    $rootScope.$evalAsync(function() 
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) 
        $location.$$parse(oldUrl);
       else 
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      
    );
  
  $location.$$replace = false;

  return changeCounter;
);

结果

Chrome 的输出

仅在加载详细信息页面时才命中断点，并且仅命中一次。 oldUrl（即$browser.url() 正在报告旧网址（即列表一） $location.absUrl() 正在报告详细信息 url。

来自 IE7,8 的输出

连续命中断点。 oldUrl（即$browser.url() 正在报告新网址（即详细信息之一） $location.absUrl() 仍在报告列表 url。

【讨论】：

【参考方案5】：

在 IE9、IE10 中使用 AngularJS v1.2.13 时，我在调用 $window.history.back() 时遇到了同样的问题（尤其是在 Windows Phone 中）。

似乎根本原因是 IE 中的 $window.history.back() 在 $locationWatch() 被触发之前更改了 href，因此 oldUrl 将包含新的 Url 并将角度抛出到无限 $digest .

立即解决的方法是将调用 $window.history.back() 替换为以下内容：

setTimeout(function () 

    $window.history.back();
, 0);

【讨论】：

太棒了！解决了我的问题......出于好奇 - 你是怎么想出来的？我想知道您是否有在 Windows Phone 上调试问题的既定流程？只需使用 IE 11 或 IE10 来调试网站并模拟正确的设备和文档模式，99% 的时间都会这样做它解决了我的问题。但我想知道“setTimeout”是如何解决这个问题的此问题的其他解决方案：$timeout(function () history.go(-1); );【参考方案6】：

我在 IE 10 中遇到问题。我正在使用