pthalacker pthalacker - 4 months ago 18
AngularJS Question

Why does angularjs interpolation fail in IE 11?

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:

IE 11 Interpolation Error

resulting in an empty style tag and default gray buttons.

Can anyone suggest a reasonable workaround for this?

Answer

This looks ugly, better use:

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

works fine