内联 Angular 代码未在 IE11 中执行答案

【问题标题】：Inline Angular Code not executing in IE11内联 Angular 代码未在 IE11 中执行
【发布时间】：2017-12-29 16:12:30
【问题描述】：

我目前正在使用 AngularJS 构建一个应用程序，我遇到了一些我以前从未见过的奇怪行为。这可能是一个非常容易解决的问题，但我不知道找到合适答案的确切术语，所以我提前为可能的重复道歉。

我的 HTML 代码如下所示：

<div class="parent">
    <div ng-repeat="item in itemList" style="left: {{100 / itemList.length}}px">{{item}}</div>
</div>

itemList 将只包含一些任意数据。问题是括号之间的代码在 IE11 中根本没有执行。在所有其他浏览器中，如果 itemList 包含 4 个值，则结果为 25%，但在 IE11 中，它只是按字面意思注册为“{{100/itemList.length}}px”，这显然不是有效的 CSS。

我尝试将整个内容转换为 ngStyle，但没有任何效果。有谁知道为什么会在 IE11 中如此特别地发生这种情况以及如何解决它？

再次重申，我不能 100% 确定我在这里使用了正确的术语，因此我们也非常感谢您在该领域提供的任何帮助。

更新

我已尝试（再次）按照 cmets 中链接的可能重复项中的建议使用 ngStyle。它仍然没有做任何事情，但也没有给我任何解析错误。

ng-style="{left: 'calc(' + (100 / itemList.length) + '% - 10px);'}"

可能的原因是在初始页面加载时，itemList 尚未填充。尽管如此，我还是会像往常一样假设这个更新是在一个摘要周期中进行的。检查相关元素也没有显示任何已设置为“左”的值。

【问题讨论】：

【解决方案1】：

感谢Phil！

通过 ngStyle 应用样式与常规样式属性的重要区别：不要将分号作为样式字符串的一部分。

style="left: 50%;"

以上是完全有效的 CSS。

ng-style="{left: '50%;'}"

除非您删除分号，否则上述方法将不起作用。

【讨论】：