Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Having "ng-style" or "ng-attr-style" isn't generating in internet-explorer and safari but works fine in chrome [duplicate]

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?

like image 732
Luke Avatar asked Nov 16 '22 03:11

Luke


1 Answers

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 ""?

like image 158
Pankaj Parkar Avatar answered Dec 15 '22 08:12

Pankaj Parkar