IE 11 won't recognize Angular JS variable

Question

The following code works fine in Chrome, but when viewed in Internet Explorer 11, the background color does not show up:

span.fa.fa-icon-only(style='background-color: #{{vehicle.visual_color}};', rr-tt='{{vehicle.color_name}}')

The visual_color variable is a hex color code, and for some reason it's not being recognized on IE. Does anyone know a way around this?

Is it because rr-tt is an invalid attribute and IE doesn't like it? — tymeJV
– tymeJV, Commented Aug 6, 2014 at 14:32
you could try using ng-style instead of style. I seem to recall that IE has some issues with using style dynamically like this — rob
– rob, Commented Aug 6, 2014 at 14:33
rr-tt is a custom angular directive, not invalid. That variable (color_name) is working fine, it is just the visual_color I am having trouble with. — Laura M
– Laura M, Commented Aug 6, 2014 at 14:35

rob · Accepted Answer · 2014-08-06 14:42:45Z

1

IE has issues with dynamically changing a style tag as shown in this example http://plnkr.co/edit/lLvvDz?p=preview. Try using ng-style instead. e.g.:

span.fa.fa-icon-only(ng-style="{'background-color': '#' + vehicle.visual_color}", rr-tt='{{vehicle.color_name}}')

answered Aug 6, 2014 at 14:42

rob

18.7k13 gold badges73 silver badges95 bronze badges

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

1 Answer 1