AngularJS 和 IE 兼容模式答案

【问题标题】：AngularJS and IE compatibility modeAngularJS 和 IE 兼容模式
【发布时间】：2014-05-01 08:52:43
【问题描述】：

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

有什么想法吗？谢谢。

【问题讨论】：

如何在 index.html 文件中初始化 ng-app？？
window.onload = function(){angular.bootstrap(document,["myWidgets"]);};
你不使用样式吗？
我可以在 IE8+ 上运行 angularjs 1.2.1x。 IE7不能，但我不在乎。
@BKM，不，我不是。我必须支持由另一个编码器启动的应用程序。

标签： javascript angularjs internet-explorer-10 ie8-compatibility-mode

【解决方案1】：

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

Angular 的建议是保持低于 1.3 的版本以确保兼容性。

参考资料：

请参阅Angular's post on the 1.3 update 并查看Compatibility Mode settings 以进一步了解这些问题。

【讨论】：

是“兼容IE10”模式，不起作用。 Andgular 1.2.x 也有同样的问题。请仔细阅读讨论...
如果版本似乎不是问题，小提琴或 plnkr 可能会有所帮助。

【解决方案2】：

您是否尝试过将指令的限制从 EA 更改为仅 E，或者（可能为了兼容性更好）只是 A，然后使用 <div data-login="true"></div>？

看起来 html 的解析方式发生了一些奇怪的事情 - 我预计它可能会添加一个属性以供其自身用于兼容性，这会搞砸一切。

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

【讨论】：

【解决方案3】：

添加这一行

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

this line

如果它打印了两次，你实际上是在加载指令两次。打印出directiveFactory 的源代码后，您还将看到它是加载了两次的同一指令 还是两个同名的指令。

【讨论】：

【解决方案4】：

在您分配模块名称 ng-app="module" 的位置提供 id="ng-app"。这将支持 IE。

【讨论】：

这对我来说是完美的解决方案！我添加了元标记和 DOCTYPE，什么都没有……这消除了所有的模块错误。太棒了@sonu！谢谢！

【解决方案5】：

在 index.html 的 head 部分添加以下行解决了我的问题：

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

欲了解更多信息：https://stackoverflow.com/a/46489212/698127

【讨论】：