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.
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.
Share Improve this question edited Mar 27, 2014 at 7:36 Stepan Yakovenko asked Mar 24, 2014 at 5:47 Stepan YakovenkoStepan Yakovenko 9,20631 gold badges123 silver badges212 bronze badges 13- How you initialize your ng-app in your index.html file?? – BKM Commented Mar 24, 2014 at 5:49
- window.onload = function(){angular.bootstrap(document,["myWidgets"]);}; – Stepan Yakovenko Commented Mar 24, 2014 at 5:55
- Aren't you using <html ng-app> style? – BKM Commented Mar 24, 2014 at 5:56
- I can run angularjs 1.2.1x on IE8+. IE7 can't but I don't care. – wayne Commented Mar 24, 2014 at 5:58
- @BKM, no, I am not. I have to support app, started by another coder. – Stepan Yakovenko Commented Mar 24, 2014 at 6:04
5 Answers
Reset to default 9 +25The 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.
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.
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.
Give id="ng-app" where you are assigning your module name ng-app="module". That will support IE.
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