问题:
我尝试在bootstrap模态框中加载一个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个问题:
- JSON不可用
- 引导应用程序存在问题
- 视图渲染存在问题
通过查阅Angular JS文档和StackOverflow的许多主题,例如:
- 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指令,restrict:'E',replace: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
尝试渲染视图时,应用程序会重定向到主页。因此,我尝试按照以下建议进行更改:
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() iterations reached. Aborting!",但是它仍然似乎触发了URL更改,导致它重定向到主页。
让我在这里解释一下我的情况,这样其他人就可以建议我是否与此完全相关:
我有一个页面,比如:http://example.com/users/myCollection.html 在这个页面上,我在Bootstrap模态对话框中加载了我的AngularJS应用程序,当用户单击页面上的某个链接时,加载在Modal中的应用程序的Angular路由为:/mywork/find
在提高Angular版本之后,现在,模态似乎会加载应用程序一秒钟,然后发生重定向,并转到主页。
FYI,我还在页面上使用jQuery来启动Angular App,这会不会有冲突的可能性?
谢谢, Ravish
JSON
全局变量是可用的。错误的渲染模式可能会导致渲染问题和其他一些问题。 - TomalakHogan Engine
,如果有帮助的话。我设置了html5mode(false)
,并添加了一些 console.log 来查看我的控制器是否被多次调用,结果它被调用了两次,但是当html5mode(false)
时视图仍然被渲染了。 - Ravish