Angular.js: IE 10 directive template binding not working correctly for style attributes

[julianjelfs]

I have an element directive with a template that uses attributes from the element to modify style in the template. This works fine in chrome but not in IE10

see http://jsfiddle.net/julianjelfs/Z9YBf/2/

Note that the {{label}} is bound fine, but the {{color}} is not.

Don't know if I am misunderstanding something but it seems to work fine in Chrome.

[resistdesign]

try using ngStyle :)

[julianjelfs]

Yes of course there are workarounds. Just that it certainly behaves differently in chrome and IE10 and it seems the IE10 behaviour is wrong so I thought I would post in case it points to any deeper problem....

[peledni]

Julian has a point. I think it's pointing to a deeper issue.

I ran a few tests and it seems that if IE is not satisfied with a certain style="" attribute it removes it from the DOM completely. Then angularjs won't even update it.

An example where this happens is: style="width: {{ itemWidth }}" - the HTML loads first so IE ignores that style attribute because it's invalid and it removes it.

For a full example of this issue try this plnkr with chrome and IE:

http://plnkr.co/edit/HpxBkuIgf7C6XP63r8EQ?p=preview&s=mpOGZxOwxO1RohQ1

[Undistraction]

I'm noticing this as well in IE9 & IE10.

<div class="page-body" style="top: {{pageBody.top}}">

The style is never updated and it looks like the style has been stripped out. Works great in FFox, Chrome and Safari.

Using ng-style is no solution for me as the possible values are not predefined.

[resistdesign]

Yeah, this is completely busted in IE10, I've tried all kinds of modifications too and it just won't use that style: http://jsfiddle.net/Z9YBf/12/

[peledni]

You can use ng-style even if your values are not predefined.

Simply run a function from within ng-style. Something like this ng-style="runSomeScopeFunction()" - in that function you can set up whatever you want.

[j8]

Pretty weird bug, I stuck on it yesterday. You can use dirty jQuery patch, something like that:

If this is the html, and you want to add inline style of the width

        <tr ng-repeat="row in table.rows">
                <div class="bar" id="ie10bar{{$index + 1}}" data-width="{{row.cols[2]}}" style="width: 0%;">
                    {{row.cols[2]}}
                </div>
            </td>
        </tr>

And this is the jQuery patch:

<script type="text/javascript">
$(document).ready(function() {
    setTimeout(function(){
        var rowsWithWidth = document.getElementsByClassName("bar");
            for(var i=1;i<=rowsWithWidth.length;i++){
                var widthOfEl = $("#ie10bar" + [i]).data("width") + "%";
                $("#ie10bar" + [i]).css({width: widthOfEl});
        }
    },1000);
});
</script>

I use setTimeout, as in my case I have some delay and need to wait for the loading of the DOM

[RacingTadpole]

This is causing trouble for me too, using angular 1.1.5. Using ng-style doesn't help.

[tangorri]

Same problem here, angular stable 1.0.8

[j8]

Isn't the new stable version fixing this issue?

[RacingTadpole]

Do you mean 1.0.8? I have the same problem when I use that version.

[j8]

1.2.0 is the new stable version. Check out the changes here: http://blog.angularjs.org/2013/11/angularjs-120-timely-delivery.html

[RacingTadpole]

Thanks. I changed to 1.2.0 and made the necessary changes to bring in ngRoute. Unfortunately, it still doesn't work in IE10.

And ironically, now the jQuery workaround I was using (like j8's above: copying from the data-style attribute to the style attribute and removing the hide class on document ready) doesn't work either... d'oh!

Any ideas?

[j8]

Well, if I got time during the weekend will deeper investigate this.

[RacingTadpole]

Much appreciated!

FYI, I've established the new problem with the workaround: it is not being called at all. I have inserted the script tag only into the directive template that needs it, which is quite deep inside the structure of the DOM. I suspect that's the problem - if I replace the js with a single console.log (ie. not waiting for document ready), it never logs anything.

[InterwebCounty]

It doesn't work in IE11 either. Source: every crappy windows computer at Best Buy. I set up a little test: http://plnkr.co/edit/l52wHl?p=preview I couldn't get ng-style to work, if someone can figure out a solution that works with IE I'd be incredibly grateful.

[jmackay]

http://plnkr.co/edit/rl7D9GWSMLehMnFmvHa7?p=preview

Works in IE 11, just switched it to use ng-style instead and a little re-write of the style code.

[btford]

Seems to be working in 1.2.x. See @jmackay's example.

If it's still an issue when using the object notation, let me know and I'll re-open this. Thanks!

[gkop]

@jmackay's example is simply an implementation of the workaround first suggested when this ticket was opened. Here is @julianjelfs's test case updated to use 1.2.6: http://jsfiddle.net/Z9YBf/27/, which continues to reproduce for me in IE 10. Keeping this ticket open would make it easier for users to track down the reason for this ongoing, surprising behavior in IE.

[jmackay]

@gkop isn't that the point of having ng-style? The fact that it works without is more of an unexpected feature.

[gkop]

I know I was surprised when my template bindings of style attributes worked in all browsers except IE.

From http://docs.angularjs.org/guide/ie :

The project currently supports and will attempt to fix bugs for IE8 and above.

Maybe we could just add a disclaimer to the IE docs advising ng-style and move on. Or maybe somebody will come along eventually and produce an acceptable fix. Either way, in the meantime, this ticket ought to be re-opened.

[richardcrichardc]

@btford (cc: @caitp)
Can we reopen this ticket. style="{{ someVar }}" is still broken in 1.2.13 in IE10 (and presumably other versions of IE). This is quite evident from looking at gkop's jsfiddle at http://jsfiddle.net/Z9YBf/27/ in IE10. The jsfiddle uses 1.2.6, but you can change this to 1.2.13 and get the same result.

It looks like the style property is an object instead of a string in IE (see http://stackoverflow.com/questions/2119300/setattribute-is-not-working-for-style-attribute-on-ie). So there would need to be a special case which parsed the attribute ...

I'd agree with gkop, might be best to just document it as borked in IE, that using ng-style is the workaround. Turns out the 'Improve this doc' links at docs.angularjs.org are borked at the moment too.

[caitp]

Hmm, well a documentation fix is definitely the simplest way to fix this, but if someone equipped to debug IE problems wants to see if they can find a solution, they are welcome to have a go at it.

[rajaron]

using ng-style it not works in IE and FireFox and in Chrome (Portable) too.. open the issue again

[rajaron]

Workaround is http://jsfiddle.net/QDv2e/14/

[chezih]

I found a brilliant workaround, just use "ng-attr-style".
it's work on IE.

For example: "ng-attr-style="width:{{width}}px;"

[ccerrato147]

ng-style worked on IE 11 and Chrome for me

[itsay]

ng-attr-style worked on IE11 and Chrome, Firefox

[raarellano]

ng-attr-style worked for me on IE9, IE10, and IE11. Thanks @ccerrato147

[byeval]

ng-attr-style works!

[nicholas-johnson]

It appears IE simply drops the content of the style attribute if it can't parse it, which then prevents Angular from recompiling the DOM. ng-attr-style appears to be a functional workaround, regenerating the stye attribute with a legal value when the template is parsed.

The following works in IE9+, Angular 1.3.11.

<img ng-attr-style="left:{{carousel.index}}%" />

[le-garden-fox]

ng-attr-style worked for me in i.e. 11. Thanks for the fix. <div class="bar bar-market" ng-attr-style="width:{{marketPercentile}}%;"></div>

[nguyentk90]

ng-attr-style can fix the issue but I cannot find the document of ng-attr-style. Can somebody reach me to the document?

[gkalpak]

@nguyentk90, you can read about ngAttr in the interpolation guide.

[nguyentk90]

@gkalpak Perfect. Thank you!

[athimannil]

Is there any solution to apply for <select data-ng-attr-size="{{dropdownheight}}"> which is crashing on IE11 ? 🤔

[TheGlitch1]

ng-attr-style="color:{{item.color}}; works for me !!