Simple AngularJS Script Works in Chrome but fails in IE11

Question

I have a simple AngularJS (v1.3.0-rc.1) page (see below) from the book, Learning AngularJS for .NET Developers (Packt Publishing) page 13, that works in Chrome, but fails to pickup the <span title="{{color}}" style="background-color:{{color}};">  </span> correctly in IE11. The F12 option in IE shows the style is not being picked up, <span title="magenta">  </span>. What can the problem be in IE11?

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8" />
        <title>Chapter 1 Example - AngularJS</title>
        <script src="Scripts/angular.js"></script>
    </head>
    <body>
        <h1>Introduction</h1>
        <label>My name:</label>
        <input type="text" placeholder="Please enter name" ng-model="name" />
        <br />
        <label>My favorite color:</label>
        <select ng-model="color">
            <option>Please select</option>
            <option>red</option>
            <option>yellow</option>
            <option>magenta</option>
        </select>
        <h3 ng-show="name">Hello! My name is {{name}}.</h3>
        <h3 ng-show="color">My favorite color is <span title="{{color}}" style="background-color:{{color}};">&nbsp;&nbsp;</span></h3>
    </body>
</html>

Instead of `style="background-color:{{color}};"` use `ng-style="{'background-color':color}"` IE removes the invalid style value when it finds `{{}}` before even angular has any chance to evaluate it. — PSL, Sep 14 '14 at 15:48
possible duplicate of [Manipulating inline style with angular does not work in IE](http://stackoverflow.com/questions/25655434/manipulating-inline-style-with-angular-does-not-work-in-ie) — PSL, Sep 14 '14 at 15:52

Joseph Yaduvanshi · Answer 1 · 2014-09-16T12:29:36.743

2

This is probably failing because the browser is attempting to apply styles before AngularJS has gotten ahold of the string and replaced {{color}} with whatever value is being set.

Angular offers some angular-specific attributes to handle this discrepancy (ng-style, ng-href, etc).

Try replacing that span with:

<span title="{{color}}" ng-style="{'background-color':color}">&nbsp;&nbsp;</span>

edited Sep 16 '14 at 12:29

answered Sep 14 '14 at 15:54

Joseph Yaduvanshi

20,241
5
61
69

Thanks, this works but the we need a start quote, the attribute should be ng-style="{'background-color':color}". I'm just getting into Angular, looks exciting. – user3802434 Sep 15 '14 at 18:00
Thanks, I must've been typing too quickly. ;) I added the missing quote. – Joseph Yaduvanshi Sep 16 '14 at 12:30
As mentioned in other answers this is a Internet Explorer issue rather than an AngularJS one. – Alex Pop Sep 30 '14 at 14:24

score 2 · Answer 2 · edited May 23 '17 at 11:58

2

I had to use ng-attr-style.

<div ng-attr-style="width: {{value}}%"></div>

Here is a github discussion about this issue.

Here is a stackoverflow question which has more solutions.

edited May 23 '17 at 11:58

Community

1
1

answered Sep 19 '14 at 17:52

Jason

8,400
10
56
69

Simple AngularJS Script Works in Chrome but fails in IE11

2 Answers2