javascript - IE 中的 AngularJS 错误与风格 vs 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

How style attribute become ""?