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.