-
Notifications
You must be signed in to change notification settings - Fork 27.5k
IE 10 directive template binding not working correctly for style attributes #2186
Comments
try using ngStyle :) |
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.... |
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 |
I'm noticing this as well in IE9 & IE10.
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. |
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/ |
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. |
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 |
This is causing trouble for me too, using angular 1.1.5. Using ng-style doesn't help. |
Same problem here, angular stable 1.0.8 |
Isn't the new stable version fixing this issue? |
Do you mean 1.0.8? I have the same problem when I use that version. |
1.2.0 is the new stable version. Check out the changes here: http://blog.angularjs.org/2013/11/angularjs-120-timely-delivery.html |
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? |
Well, if I got time during the weekend will deeper investigate this. |
Much appreciated! FYI, I've established the new problem with the workaround: it is not being called at all. I have inserted the |
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. |
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. |
Seems to be working in If it's still an issue when using the object notation, let me know and I'll re-open this. Thanks! |
@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 |
@gkop isn't that the point of having ng-style? The fact that it works without is more of an unexpected feature. |
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 :
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. |
@btford (cc: @caitp) 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. |
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. |
using ng-style it not works in IE and FireFox and in Chrome (Portable) too.. open the issue again |
Workaround is http://jsfiddle.net/QDv2e/14/ |
I found a brilliant workaround, just use "ng-attr-style". For example: "ng-attr-style="width:{{width}}px;" |
ng-style worked on IE 11 and Chrome for me |
ng-attr-style worked on IE11 and Chrome, Firefox |
ng-attr-style worked for me on IE9, IE10, and IE11. Thanks @ccerrato147 |
ng-attr-style works! |
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.
|
|
|
@nguyentk90, you can read about |
@gkalpak Perfect. Thank you! |
Is there any solution to apply for |
ng-attr-style="color:{{item.color}}; works for me !! |
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.
The text was updated successfully, but these errors were encountered: