AngularJS和IE兼容模式

6

我有一个使用AngularJS(AngularJS v1.3.0-beta.3)开发的应用程序,在IE10兼容模式下会崩溃。在Firefox、Chrome和IE11中都运行良好。以下是控制台报告的错误信息:

Multiple directives [login, login] asking for 'login' controller on: <div>

为了设置应用程序的状态,我创建一个节点:
link: function ($scope, $element, $attrs) {
    ....
$element.html('<login></login>');
    $compile($element.contents())($scope); // crash happens here
    ....
}

这是我的登录指令:

widgets.directive('login', ['$compile', '$http', 'resourceLoader', function ($compile, $http, resourceLoader) {
    return {
        restrict: 'AE',
        replace: true,
        template: '<div></div>',
        controller: function ($scope, $element) {
            $scope.user.isLogged = false;
            $scope.user.password = undefined;

            $scope.submitLogin = function () {
                // code that goes to server
            };
        },
        link: function ($scope, $element, $attrs) {
            resourceLoader.get('templates', 'profile', 'unlogged/login', 'jquery.min', function (template) {
                $element.html(template);
                $compile($element.contents())($scope);
            });
        }
    };
}]);

任何想法?谢谢。

你如何在index.html文件中初始化你的ng-app? - BKM
window.onload = function(){angular.bootstrap(document,["myWidgets"]);}; - Stepan Yakovenko
@BKM,不是的。我必须支持另一个程序员启动的应用程序。 - Stepan Yakovenko
@wayne,这对我有什么帮助? - Stepan Yakovenko
1.2.1x 有相同的问题。 - Stepan Yakovenko
显示剩余8条评论
5个回答

9
主要问题在于Angular 1.3不支持旧版本的Internet Explorer,具体而言是IE8及以下版本。将IE10设置为兼容模式将使浏览器对某些布局和功能表现得像一个旧版本的浏览器。这里的向后兼容性问题很可能是罪魁祸首。
Angular建议使用低于1.3版本以确保兼容性。
参考资料: 请参阅Angular关于1.3更新的文章,并查看有关问题的兼容性模式设置以获取更多信息。

1
这是“兼容IE10”模式,无法正常工作。Andgular 1.2.x也有同样的问题。请仔细阅读讨论... - Stepan Yakovenko
如果版本似乎不是问题,可以使用fiddle或plnkr来帮助解决。 - Ryan Q

1
在你分配模块名称 ng-app="module" 的位置上,加上 id="ng-app"。这将支持IE浏览器。

这对我来说是完美的解决方案!我已经添加了元标记和 DOCTYPE,但什么也没有……这消除了所有模块错误。太棒了@sonu!谢谢! - Kris Boyd

1

你尝试将指令的限制从EA更改为E,或者(可能更适用于兼容性)只使用A,然后使用<div data-login="true"></div>

看起来HTML解析出现了一些奇怪的问题 - 我认为它可能会添加一个属性以供自己在兼容性方面使用,这会搞乱一切。

如果这样不行,提供一个plunker或fiddle以更清楚地演示问题,你就更有可能得到正确的答案。


1
添加这行代码。
if ( name === 'login' ) console.log(name, directiveFactory.toString());

这一行,如果它打印了两次,那么你确实加载了两次指令。通过打印出directiveFactory的源代码,你还可以看到是加载了两个相同的指令还是两个名称相同的指令


0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接