Angular JS works in Chrome, but not IE 11
Solution 1
Could be because document compatibility. This worked for me:
Add this tag to web.config.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=10" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Solution 2
I added the following to the head and it worked. its very similiar to what Mark said...just none asp.net specific:
<meta http-equiv="X-UA-Compatible" content="IE=11" />
i also found i needed to add respond and modernizer in a if statement for older versions of IE:
<!--[if lt IE 9]>
<script src="/Binders/Scripts/modernizr-2.8.3.js"></script>
<script src="/Binders/Scripts/respond.js"></script>
<![endif]-->
Solution 3
Use ng-style tags instead of style="{{CSS}}". The latter works in Chrome and Firefox but does not work in Internet Explorer <= 11.
Dunnomuch
Updated on July 09, 2022Comments
-
Dunnomuch almost 2 years
I'm picking up Angular JS at: http://www.sitepoint.com/practical-guide-angularjs-directives/, and I find that the following codes work in Chrome, but not IE 11.
<!DOCTYPE html> <html ng-app="myapp"> <head> <meta charset="utf-8" /> <title>No Title</title> <script data-require="[email protected]" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script> </head> <body> <input type="text" ng-model="color" placeholder="Enter a color..." /> <div data-hello-world /> <script> var app = angular.module('myapp', []); app.directive('helloWorld', function () { return { restrict: 'AE', replace: true, template: '<p style="background-color:{{color}}">Hello World!!</p>', link: function (scope, elem, attrs) { elem.bind('click', function () { elem.css('background-color', 'white'); scope.$apply(function () { scope.color = "white"; }); }); elem.bind('mouseover', function () { elem.css('cursor', 'pointer'); }); } } }); </script> </body> </html>
Specifically, the mouseover and click events work fine. However, the paragraph's background color doesn't in IE (the color never changes). It's ok in Chrome. Thanks!
-
Caverman about 8 yearsThis worked for me! I was just trying to confirm Angular would work because my company has their IE locked down pretty good. So, I had just a very simple one line Angular expression with no controllers or anything like that. Didn't work in IE 11 but would in Chrome. Only difference I changed was that I used "IE-11" instead of "IE-10".
-
monty over 6 yearsThis was a lifesaver. Even though my angularjs app had been happily working with IE up until now, and even though I didn't change the angular.min.js file (it was v 1.4.4), this problem popped up overnight after a release to a client. I couldn't take the client offline during business hours, but could make this change on the website's master page to fix it without taking out every else's session.
-
monty over 6 yearsIf you're working on a website and can't take it offline to make this change, but have a .master (if an asp.net website) file then adding <meta http-equiv="X-UA-Compatible" content="IE=11" /> to the master's <head> can be a good solution too. Thanks to @James Gates R below for that suggestion.