Why does angularjs interpolation fail in IE 11?

Question

I have a simple directive that creates a toolbar from an array of tool objects

<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>

In Chrome, Firefox, Safari and Edge this works fine. But the button color isn't being interpolated in IE 11. The interpolation is failing for some reason. This is what shows up in the IE element inspector:

resulting in an empty style tag and default gray buttons.

Can anyone suggest a reasonable workaround for this?

Answer 1

This looks ugly, better use:

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

works fine

Answer 2

In short, avoid "{{value}}" syntax entirely.

Interpolation/Transclusion, in general, don't seem to work with Internet Explorer 10 and 11, at least in Angular version 1.5.5. It may have been fixed in a subsequent version.

The work around is to use ng attributes instead of using interpolation, and ng-bind (creating a span to bind too if needed) for generic text injection. These are probably best practice anyway.

Having debugged it, the underlying cause seems to be that ultimately j-query is used to set the text value of the node, which works fine with most browsers, as the text node is either implicitly present, or automatically created, but these versions of IE require a text node to be explicitly created first. A newer version of j-query may address this (we're using 2.2).

Further information can be found here:

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