IE9中未执行angularjs过滤器

Question

我正在运行AngularJS 1.2.22，似乎在使用IE9和我编写的自定义过滤器时遇到了麻烦。 它可以在Chrome和Firefox中正常运行，但是，当然，不是我真正需要的浏览器。

我在<i>标记中有两个过滤器：一个返回字体真棒的图标名，另一个提供颜色样式。 问题是，一个过滤器可以正常运行，这给了我图标名称，而另一个过滤器却没有，给了我颜色。

这是我的HTML

<td>
    <i tooltip="{{d.Validation}}" class='fa {{d.StatusIndicator | statusIcon}}'
        style="color: {{d.StatusIndicator | statusIconColor}}; font-size: 1.25em;"></i>
</td>

我的过滤器来源：

app.filter('statusIcon', function() {
    return function(item) {
        switch (item) {
        case 'Y':
            return "fa-exclamation-circle";
        case 'R':
            return "fa-exclamation-triangle";
        case 'G':
            return "fa-check-circle";
        default:
            return "";
        }
    };
});

app.filter('statusIconColor', function() {
    return function(item) {
        switch (item) {
        case 'Y':
            return "#B2B200";
        case 'R':
            return "red";
        case 'G':
            return "green";
        default:
            return "green";
        }
    };
});

当我在Firefox和IE上打开开发工具时，可以看到在Firefox中正确呈现了“颜色”样式，但是在IE中根本没有“颜色”样式。 我在Firefox中的“ statusIconColor”过滤器中看到断点，但在IE中却没有，这使我相信该过滤器甚至没有在IE中被调用。

“ statusIcon”过滤器中的一个断点在两个浏览器中都有效，但在“ statusIconColor”中却没有。 奇怪！

并且没有控制台错误消息。

我将不胜感激任何建议。 科里。

Answer 1

当您应该使用ngAttrStyle指令时，情况就是这样：

ng-attr-style="color: {{d.StatusIndicator | statusIconColor}}; font-size: 1.25em;"

但是，我会更好地使用ngStyle，并避免为此使用过滤器。 您可以改用控制器功能。

显然，IE应用了以下样式的color: {{d.StatusIndicator | statusIconColor}}; font-size: 1.25em; color: {{d.StatusIndicator | statusIconColor}}; font-size: 1.25em; 从字面上看，因此ngAttrStyle指令仅在插值后才设置style属性。