为什么 angularjs 插值在 IE 11 中失败？

Question

我有一个简单的指令，可以从一组工具对象创建工具栏

<div ng-repeat="tool in tb.tools">
    <button id="{{tool.name}}" class="btn" 
            aa-tool-button="tb.state.selectedTool"
            ng-click="tb.toggleSelected(tool)"
            style="background-color:{{tool.color}}">
        {{tool.caption}}
    </button>
</div>

在 Chrome 中，Firefox、Safari 和 Edge 可以正常工作。但是按钮颜色没有在 IE 11 中进行插值。由于某种原因插值失败。这是在 IE 元素检查器中显示的内容：

导致空样式标签和默认灰色按钮。

任何人都可以为此提出合理的解决方法吗？

Answer 1

这看起来很丑，更好用：

ng-style="{'background-color': tool.color}"

工作正常

Answer 2

简而言之，完全避免使用“{{value}}”语法。

Interpolation/Transclusion，一般来说，似乎不适用于 Internet Explorer 10 和 11，至少在 Angular 版本 1.5.5 中是这样。它可能已在后续版本中修复。

解决方法是使用 ng 属性而不是使用插值，以及 ng-bind（如果需要也创建一个 span 来绑定）用于通用文本注入。无论如何，这些可能是最佳实践。

经过调试，根本原因似乎是最终使用 j-query 来设置节点的文本值，这在大多数浏览器中都可以正常工作，因为文本节点要么隐式存在，要么自动创建, 但这些版本的 IE 需要首先显式创建文本节点。更新版本的 j-query 可能会解决这个问题（我们使用的是 2.2）。

可在此处找到更多信息：

https://github.com/angular-ui/ui-router/issues/615 https://github.com/angular/angular.js/issues/5025

为什么 angularjs 插值在 IE 11 中失败？

Why does angularjs interpolation fail in IE 11?

angularjs

internet-explorer-11