6

问题:

我正在尝试在引导模式窗格中加载 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) Bootstraping 应用程序问题 3) 渲染视图问题

在浏览了 Angular JS 文档和 StackOverflow 中的许多线程之后,例如:

我们发现所有线程中很少有共同点(在 AngulaJS IE 指南中也提到过): * 为 IE 包含 JSON2/JSON3 pollyfills * 使用 ie-shiv,并预先声明自定义标签(我们使用自定义 typeahead 指令,带有限制: 'E', replace: true) * 使用其他 IE 特定指令

所以,我做了以下 chagnes :

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

在尝试呈现视图时,应用程序正在重定向到主页。所以我尝试进行以下建议的更改:

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

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

如果我设置:

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

它工作正常。任何人都面临类似的问题?任何帮助表示赞赏。

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

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

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

更新

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

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

我有一个页面说:http ://example.com/users/myCollection.html 在此页面上,当用户单击页面上的某个链接时,我正在引导模式对话框中加载我的 AngularJS 应用程序。在 Modal 中加载的应用程序的角度路线是:/mywork/find

现在,在升级 Angular 的版本之后,Modal 似乎加载了应用程序一秒钟,然后发生了重定向,然后它进入了主页。

仅供参考,我也在用于启动 Angular 应用程序的页面上使用 jQuery,是否有可能因此发生冲突?

谢谢, 狂欢

4

1 回答 1

9

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

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

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

我强烈建议关注每个人,工作或准备在 Angular JS 上工作,你想在 IE 上使用,请阅读以下内容:

第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/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 再次摇摆不定;)

于 2013-10-20T11:28:57.100 回答