Login/Register
AngularJS and IE compatibility mode
Asked Answered
Solved javascriptangularjsinternet-explorer-10ie8-compatibility-mode
S

5

6

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.

Stockman answered 24/3, 2014 at 5:47 Comment(13)
How you initialize your ng-app in your index.html file?? – Pantomimist
window.onload = function(){angular.bootstrap(document,["myWidgets"]);}; – Stockman
Aren't you using <html ng-app> style? – Pantomimist
I can run angularjs 1.2.1x on IE8+. IE7 can't but I don't care. – Aidaaidan
@BKM, no, I am not. I have to support app, started by another coder. – Stockman
@wayne, how can this help me? – Stockman
you can't use 1.2.1x? – Aidaaidan
1.2.1x has the same problem – Stockman
Does it work in IE10 with compatibility mode turned off? – Alkaline
We need more code than this. Can you make a jsfiddle so we can see the issue that you're reporting? We at least need to see the login directive – Affection
I had seen a stackoverflow with a similar question. #20893713 – Crwth
It doesn't work in IE10 at all. – Stockman
i had got same issue few days back, but it was because i had directive with same name defined in multiple places.. just check its not the case with you... – Program
W
9

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.

Weywadt answered 28/3, 2014 at 2:51 Comment(2)
It is "compatibility with IE10" mode, that doesn't work. Andgular 1.2.x has the same problem. Please read discussion carefully... – Stockman
A fiddle or plnkr might help if the version does not seem to be the issue. – Weywadt
S
1

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.

Spiel answered 31/3, 2014 at 15:32 Comment(0)
F
1

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.

Followthrough answered 1/4, 2014 at 5:0 Comment(0)
P
1

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

Perish answered 8/1, 2015 at 5:53 Comment(1)
This was the perfect solution for me! I had added the meta tag and DOCTYPE and nothing... This got rid of all the module errors. Brilliant @sonu! Thank you! – Regress
L
0

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://mcmap.net/q/1771273/-angular-cli-angular-4-ie10-doesn-39-t-work

Longwood answered 13/11, 2017 at 4:30 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.