Geek Answers Handbook

Compatibility Mode with AngularJS and IE

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

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

to set the state of the application, I create a node:

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

Here is my directive to enter:

 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.

+6
source share
5 answers

Main problem: Angular 1.3 does not support older versions of Internet Explorer, especially 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. Backward compatibility issues are probably the culprits here.

Angular's offer should remain in version less than 1.3 for compatibility.

Literature:

See the Angular update 1.3 post and review the Configuration Compatibility Mode for further troubleshooting.

+9
source

Did you try to change the directive restriction from EA to E or (perhaps better for compatibility) only A , and then using <div data-login="true"></div> ?

It seems like something strange is happening with the way html is parsed - I expect it to probably add an attribute for its own use in compatibility, which wraps everything up.

If this does not work, you will be much more likely to get the right answer if you provide a plunker or a violin to demonstrate the problem more clearly.

+1
source

Add this line

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

in this line

If it prints twice, you really download the directive twice. When you print the directiveFactory source code, you will also see if the same directive is loaded twice or two directives with the same name are loaded.

+1
source

Give id = "ng-app" where you assign your module name ng-app = "module". This will support IE.

+1
source

Adding the following line in the head.html head section to solve my problem:

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

For more information: fooobar.com/questions/966307 / ...

0
source

More articles:


All Articles