AngularJS IE 风格与 ng 风格的错误

Question

我正在使用 Angular JS v1.1.5，发现一个有趣的 IE 相关问题。

在 IE 9、10、11 和 Edge 中，以下内容似乎不起作用，尽管它在 Chrome 中运行良好：

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

而这适用于所有浏览器：

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

我很好奇为什么第一个选项在IE/Edge中不起作用。是否有任何已知的错误？

Answer 1

当 IE 9 和 10 尝试呈现 HTML 时，它基本上删除了在 HTML 上找到的无效 HTML 进行解析。

所以 style="display: {{'block'}}" 被认为是无效的 html，因为它具有未知的 {{}} 语法并且它使该属性呈现为 style=""

除了 ng-style 之外，您还可以使用如下 ng-attr-* 指令

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

当 progress.percent() 值发生变化时将创建样式属性。

有关详细信息，请查看此旧记录 github issue

Answer 2

问题也发生在边缘。就这样写

[ngStyle]="{'width.px': 20}"

AngularJS bug in IE with style vs ng-style