Angular expression inside style attribute don't work in IE

Question

I have angular 1.0.6 (I know it's old) and I have style attribute with expressions:

<li style="background-color: {{item.color}}">
   <span style="color: {{item.color | contrastColor}}">{{item.label}}</span>
</li>

It work fine but not for IE (The app need to work for >IE10). When I open Developer tool the style attribute is not present. I've try to create custom style directive (because I tought that IE remove invalid attribute before Angular can read it) but with this simple code, I've got an error TypeError: Cannot read property 'replace' of undefined from jquery (tested on google chrome) because in my case item.color can be null

.directive("logStyle", function() {
    // logStyle directive
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
           element.css(scope.$eval(attrs.logStyle));
        }
    };
});

How can I make it work. I know that there is ngStyle but it's not quite what I need.

can you create a plunker or jsfiddle, I'd like to see it across browsers. — SoluableNonagon
– SoluableNonagon, Commented May 12, 2014 at 14:37
using .css() read requires .css(propertyName), and set requires element.css(propertyName, newValue), it seems you are trying to read rather than to set — SoluableNonagon
– SoluableNonagon, Commented May 12, 2014 at 14:40
@EliteOctagon you can also use css with object. I wanted to parse and create object using $eval. Maybe I should use JSON {color: item.color} as attribute value. — jcubic
– jcubic, Commented May 12, 2014 at 15:10

Jon · Accepted Answer · 2014-05-13 16:50:55Z

15

Ok, try this but I'm not sure if I fully understand what your trying to do

<div ng-controller="appCtrl">
<ul>
    <li ng-repeat="item in items" ng-style="{'background-color': item.color}">
        <span ng-style="{ 'color': (item.color | contrastColor) }">{{ item.label }}</span>
    </li>
</ul>
</div>

Edited the html, couldn't test this on IE last night so had to wait until today. IE seemingly doesn't like the style attribute with {{ }} binding inside so it deletes it from the DOM. I found this issue https://github.com/angular/angular.js/issues/2186 and there is a plunkr with the fix given.

edited May 13, 2014 at 16:50

answered May 12, 2014 at 15:18

Jon

2814 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jcubic Over a year ago

Don't work, got TypeError: Cannot read property 'exp' of undefined

jcubic Over a year ago

Additionaly color: {{item.color | contrastColor}} return parse error while using ng-style.

Jon Over a year ago

Are you trying to filter by contrastColor?

jcubic Over a year ago

it's custom filter that return white or black depend on the color.

jcubic Over a year ago

You can use ng-style="{backgroundColor: section.color}" no need to wrap in {{ }}, also why did you put angular js code, I have it I've ask about style (I didn't ask how to create a constrastColor filter), also why you showing me $scope.items it was not my question. I've didn't include that code in my question because it was not relevant.

Suraj Bajaj · Accepted Answer · 2016-07-11 21:31:28Z

4

For me changing style to ng-attr-style solved the issue. Tested in IE and Chrome. Hope this helps someone else.

You can use {{ }} like this:

ng-attr-style="color:{{entity.status | statusColor}};"

answered Jul 11, 2016 at 21:31

Suraj Bajaj

6,6505 gold badges36 silver badges50 bronze badges

Comments

Rubi saini · Accepted Answer · 2015-10-20 05:37:22Z

2

IE browser is not able to parse angular expression with style attribute so You should use ng-style instead of style to resolve this problem.

answered Oct 20, 2015 at 5:37

Rubi saini

2,53525 silver badges21 bronze badges

Comments

Anand Mohan Singh · Accepted Answer · 2017-03-21 06:43:22Z

0

changing style to ng-attr-style resolves the issue and works fine in all the browsers

answered Mar 21, 2017 at 6:43

Anand Mohan Singh

281 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Angular expression inside style attribute don't work in IE

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related