13

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="angular.js@1.2.x" 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!

Dunnomuch
  • 223
  • 1
  • 2
  • 11
  • 2
    Try [ngStyle](https://docs.angularjs.org/api/ng/directive/ngStyle) instead of the classic `style` attribute. – link May 19 '14 at 07:45
  • I've tried '

    Hello World!!

    ', and it doesn't work in both IE and Chrome. I'm running out of quotes...! Both single and double quotes are already used. :(     – Dunnomuch May 19 '14 at 07:55
  • Escape the quotation marks – Wottensprels May 19 '14 at 07:57
  • 1
    I tried '

    Hello World!!

    ' and it worked in both browsers. Thanks!     – Dunnomuch May 19 '14 at 09:25
  • As an aside note, '

    Hello World!!

    ' doesn't work in both browsers. Don't escape too much, don't escape too little. What headache!     – Dunnomuch May 19 '14 at 09:36
  • @Dunnomuch, try to move your script into the `head` tag of the html, removing the scripts from the html `body`, I was with this problem in IE11 and FF and it solved my problem. If you still have this problem try this, and let us know. – Fernando Leal Aug 20 '14 at 12:59
  • 1
    There are several other solutions in this [stackoverflow question](http://stackoverflow.com/questions/13716993/angularjs-expression-not-working-within-style-attribute-on-ie8/25939651#25939651). – Jason Sep 19 '14 at 17:54

4 Answers4

8

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>
Mark
  • 379
  • 3
  • 11
  • 1
    This 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". – Caverman Apr 15 '16 at 14:08
  • 2
    If 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 to the master's can be a good solution too. Thanks to @James Gates R below for that suggestion. – monty Jan 24 '18 at 00:10
4

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]-->
James Gates R.
  • 101
  • 5
  • This 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 Jan 24 '18 at 00:07
3

Use ng-style tags instead of style="{{CSS}}". The latter works in Chrome and Firefox but does not work in Internet Explorer <= 11.

Ankit
  • 31
  • 2
0

Try "use strict" directive before controller

"use strict";
function controller($scope) {
    // your code....
}
Shyam_coder
  • 869
  • 10
  • 5