internet-explorer - SCRIPT5022 : 10 $digest() iterations reached. 正在中止!并重定向到index.html

Question

问题:

我正在尝试在引导模式 Pane 中加载 Angular JS 应用程序，但它在 Internet Explorer 上显示奇怪的行为(我们已在 IE9 和 8 上对其进行了测试)。

我们发现出现以下错误:

** 'JSON' 未定义** 对象错误未定义

SCRIPT5022: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  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(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 7; oldVal: 6"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  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(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 8; oldVal: 7"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  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(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 9; oldVal: 8"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  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(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 10; oldVal: 9"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  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(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 11; oldVal: 10"]]

以及许多其他错误

所以，我们发现IE上有3个问题:1) JSON 不可用2) Bootstrap应用程序的问题3)问题渲染 View

在阅读 Angular JS 文档和 StackOverflow 中的大量线程之后，例如:

• http://docs.angularjs.org/guide/ie

• 'JSON' is undefined error in IE only

• JSON Parse Error on Internet Explorer
• Running AngularJS App on Internet Explorer 7
• http://docs.angularjs.org/guide/directive

我们发现所有线程之间都有一些共同点(AngulaJS IE 指南中也提到过):* 包括 IE 的 JSON2/JSON3 pollyfills* 使用 ie-shiv，并预先声明自定义标签(我们使用自定义 typeahead 指令，限制:'E'，替换:true)* 使用其他IE特定指令

所以，我做了以下修改:

var markup = '<div id="ng-app" class="ng-app:myapp" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>';
    jQuery('#works-modal').html(markup);
    angular.bootstrap(jQuery('#ng-app'), ['myapp']);   
    jQuery('#works-modal').modal('show');

实现上述更改后，我仍然得到:

Error: 10 $digest() iterations reached. Aborting!

https://github.com/angular/angular.js/issues/1417

尝试渲染 View 时，应用程序正在重定向到主页。所以我尝试进行以下建议的更改:

https://github.com/RobbinHabermehl/angular.js/commit/c801f91a25b9be6f5b1163c012e63c84cc6a1359

现在，我不再收到错误，当我单击链接显示模态对话框时，它会显示弹出窗口一秒钟，然后重定向到主页。

如果我设置:

$locationProvider.html5Mode(false)
  .hashPrefix('!');

效果很好。有人面临类似的问题吗？如有任何帮助，我们将不胜感激。

更新我还在 Angular JS Github bug 列表上报告了这个问题，他们告诉我他们已经在 1.2 版本上修复了这个问题:

https://github.com/angular/angular.js/issues/3397

如果可以解决我的问题，我会检查并更新此线程。

更新

我更新了我的 Angular 版本，这似乎解决了“已达到 10 $digest() 迭代。正在中止!”的问题，但是，它似乎仍然会触发 URL 更改，导致它重定向到主页。

让我在这里解释一下我的情况，以便其他人可以建议我这是否与此完全相关:

我有一个页面说:http://example.com/users/myCollection.html在此页面上，当用户单击页面上的某个链接时，我正在 Bootstrap Modal 对话框中加载我的 AngularJS 应用程序。 Modal 中加载的应用程序的 Angular 路径为:/mywork/find

升级 Angular 版本后，现在 Modal 似乎会加载应用程序一秒钟，然后发生重定向，然后转到主页。

仅供引用，我也在用于启动 Angular 应用程序的页面上使用 jQuery，是否有可能因此而发生冲突？

谢谢，拉维什

Answer 1

我已经总结了上面的问题，以及解决这些问题所采取的步骤，让我再次总结，然后我将总结问题“已达到 10 $digest() 迭代。正在中止!“:

步骤 1) IE 上引导应用程序出现问题

IE 上的引导应用程序出现问题。我们正在 Bootstrap 模式对话框中加载 Angular 应用程序，并手动引导 Angular 应用程序。由于我们收到渲染 View 错误，我们怀疑它与以下任一相关:我们错过了我们“心爱的”IE 不喜欢的东西，或者，它根本不喜欢我的自定义指令，或者我们与自定义指令一起使用的 Hogan 引擎指示。我通过阅读特定的 Angular JS 文档和一个 Stackoverflow 线程解决了这些问题。

我强烈建议关注正在或即将在 Angular JS 上工作的每个人，如果您想在 IE 上使用，请阅读以下内容:

• http://docs.angularjs.org/guide/ie
• http://docs.angularjs.org/guide/directive
• Running AngularJS App on Internet Explorer 7

步骤 2)

在第 1 步之后，我们能够让应用程序以 html5mode(false) 运行，但是 html5mode(true) 对我们来说仍然是一个问题。经过一些调试并添加一些 console.log 后，我们意识到即使使用 html5mode(false)，应用程序也会被引导两次。两次？但是，我们手动引导应用程序。以下是我用于引导 Angular 应用程序的模板:

var markup = '<div id="ng-app" class="ng-app:myapp" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>';
jQuery('#works-modal').html(markup);
angular.bootstrap(jQuery('#ng-app'), ['myapp']);   
jQuery('#works-modal').modal('show');

我们修改了上面的模板，如下所示:

var markup = '<div id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>';
jQuery('#works-modal').html(markup);
angular.bootstrap(jQuery('#ng-app'), ['myapp']);   
jQuery('#works-modal').modal('show');

添加了 onclick="return false;"用于启动应用程序的链接上的 href="#"。

注意:如果您的应用程序中有超链接，请确保正确处理它们，并且它们正在执行您希望它们执行的操作，因为“href”可能会导致位置更改，从而导致位置更改您的应用程序可能不喜欢。

第3步)更新Angular JS版本

一些 Angular JS Github 错误页面中提到了一些可能的修复:

• https://github.com/angular/angular.js/issues/1417
• https://github.com/angular/angular.js/issues/3397

以下要点中提到了这样的修复:https://github.com/RobbinHabermehl/angular.js/commit/c801f91a25b9be6f5b1163c012e63c84cc6a1359

但是，我对修补核心库的想法感到不舒服，更新核心库有其自己的缺点，即您可能会重构应用程序使用的部分代码，该库已被弃用，但是，如果存在严重错误修复(比如修复我们面临的问题)和改进，这总是一个尝试。因此，我们将转向 Angular JS 的最新稳定版本。

现在，我们不再收到错误，并且能够在所有浏览器上引导我们的应用程序(是的，甚至在 OMG IE7 上；))。

一切都很好，对吧？好吧，在升级了 Angular 的版本后，现在，Modal 似乎加载了应用程序一秒钟，然后，发生了重定向，它进入了主页。

但是，Angular JS $location 服务指南($location 服务配置以及 Hashbang 和 HTML5 模式)对此进行了解释:http://code.angularjs.org/1.2.14/docs/guide/dev_guide.services.$location

HashBang(或 HTML5 后备模式)需要服务器端配置，这是一种服务器端“hack”。如果你“真的”想要这样的东西，或者不想要这样的东西，这真的取决于你。

所以，现在一切都好:)

希望这对遇到此问题或类似问题的任何人有所帮助。

Angular JS 再次震撼;)