AngularJS and IE compatibility mode

Question

I have angularJS(AngularJS v1.3.0-beta.3) application that crashes in IE10 compatibility mode. It works fine in FF, Chrome and IE11. Here is what I get as an error in console:

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

to set state of application, I create a node:

link: function ($scope, $element, $attrs) {
    ....
$element.html('<login></login>');
    $compile($element.contents())($scope); // crash happens here
    ....
}

Here is my login directive:

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);
            });
        }
    };
}]);

Any ideas? Thanx.

Answer 1

The main issue is Angular 1.3 does not support older versions of Internet Explorer, more specifically IE8 and less. Putting IE10 in compatibility mode will make the browser act as if it were an older browser for certain layouts and features. The backwards compatability issues are likely the culprit here.

The suggestion by Angular is to remain in a version less than 1.3 to ensure compatability.

References:

See Angular's post on the 1.3 update and review Compatibility Mode settings for further reading on the issues.

Answer 2

Have you tried changing the restriction on the directive from EA to just E, or (probably better for compatability) just A and then using <div data-login="true"></div>?

It looks like something strange is going on with how the html is being parsed - I expect that it's probably adding an attribute for its own use in compatibility, which is screwing everything up.

If this doesn't work, you'd be much more likely to get a correct answer if you provide a plunker or a fiddle to demonstrate the issue more clearly.

Answer 3

Add this line

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

at this line

If it prints out twice, you are really loading the directive twice. With the directiveFactory's source code printed out, you will also see if it's the same directive loaded twice or two directives with the same name.

Answer 4

Give id="ng-app" where you are assigning your module name ng-app="module". That will support IE.

Answer 5

Adding below line in index.html's head section solved my problem:

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

For more info : https://stackoverflow.com/a/46489212/698127