AngularJS和IE兼容模式

AngularJS and IE compatibility mode

本文关键字:模式 IE AngularJS      更新时间:2023-09-26

我有一个angularJS(angularJS v1.3.0-beta.3)应用程序在IE10兼容模式下崩溃。它在FF, 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);
            });
        }
    };
}]);

任何想法?谢谢。

主要问题是Angular 1.3不支持旧版本的ie浏览器,更具体地说是IE8或更低版本。将IE10置于兼容模式将使浏览器在某些布局和功能上表现得像旧浏览器一样。向后兼容性问题可能是这里的罪魁祸首。

Angular的建议是保持在1.3以下的版本,以确保兼容性。

引用:

请参阅Angular关于1.3更新的帖子,并查看兼容性模式设置以进一步了解问题。

您是否尝试将指令限制从EA更改为E,或者(可能更好的兼容性)仅A然后使用<div data-login="true"></div> ?

看起来html的解析方式有些奇怪——我想它可能是为了自己的兼容性添加了一个属性,这把一切都搞砸了。

如果这不起作用,如果你提供一个活塞或小提琴来更清楚地展示问题,你将更有可能得到正确的答案。

添加这一行

if ( name === 'login' ) console.log(name, directiveFactory.toString());

在这行

如果输出两次,说明你确实加载了两次指令。在打印出directiveFactory的源代码后,您还将看到它是同一个指令加载了两次还是两个具有相同名称的指令

给出id="ng-app",其中你分配你的模块名称ng-app="module"。

在index.html的header部分添加下面一行解决了我的问题:

 <meta http-equiv="x-ua-compatible" content="IE=edge">

更多信息:https://stackoverflow.com/a/46489212/698127