代码之家  ›  专栏  ›  技术社区  ›  Stepan Yakovenko

AngularJS和IE兼容模式

  •  6
  • Stepan Yakovenko  · 技术社区  · 12 年前

    我有angularJS(angularJS v1.30-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);
                });
            }
        };
    }]);
    

    有什么想法吗?谢谢。

    5 回复  |  直到 12 年前
        1
  •  9
  •   Ryan Q    12 年前

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

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

    参考文献:

    看见 Angular's post on the 1.3 update 和审查 Compatibility Mode settings 以进一步阅读这些问题。

        2
  •  1
  •   Ed_    12 年前

    你试过把指令的限制从 EA 为了正义 E ,或(可能更适合兼容性) A 然后使用 <div data-login="true"></div> ?

    html的解析方式似乎有点奇怪——我预计它可能是在添加一个属性以供自己在兼容性中使用,这会把一切搞砸。

    如果这不起作用,如果你提供一个更明确的答案,你就更有可能得到正确的答案。

        3
  •  1
  •   Sylvain    12 年前

    添加此行

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

    this line

    如果它打印了两次,那么实际上是在加载指令两次。使用 directiveFactory 的源代码打印出来,您还将看到它是否 同一指令加载了两次 两个同名指令 .

        4
  •  1
  •   Sonu    11 年前

    将id=“ng-app”指定给模块名称ng-app=“module”的位置。这将支持IE。

        5
  •  0
  •   Aamol    8 年前

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

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

    有关详细信息: https://stackoverflow.com/a/46489212/698127