5

I'm using Angular JS v1.1.5, and found an interesting IE-related issue.

In IE 9, 10, 11 and Edge, the following does not seem to work, even though it works fine in Chrome:

<div style="width: {{progress.percent()}}%;"></div>

Whereas this works in all browsers:

<div ng-style="{width: progress.percent() + '%'}"></div>

I'm curious why the first option doesn't work in IE/Edge. Are there any known bugs around this?

Luke
  • 18,811
  • 16
  • 99
  • 115

2 Answers2

11

When IE 9 & 10 tries to render that HTML, it basically removes the invalid HTML found on HTML to be parse.

So having style="display: {{'block'}}" consider as invalid html, because it has unknown {{}} syntax & it make that attribute rendered as style=""

Other than having ng-style there you could use ng-attr-* directive like below

<div ng-attr-style="{{'width: '+ progress.percent() +'%;'}}"></div>

which will create style attribute when progress.percent() value does changed.

For more information look at this old logged github issue

How style attribute become ""?

Community
  • 1
  • 1
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
0

the problem also happens on edge. just write like this

[ngStyle]="{'width.px': 20}"
Johansrk
  • 5,160
  • 3
  • 38
  • 37