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

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}}”语法。

插值/转换通常似乎不适用于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