angularjs 过滤器未在 IE9 中执行

Question

我是 运行 AngularJS 1.2.22，我似乎无法使用 IE9 和我编写的自定义过滤器。它在 Chrome 和 Firefox 中运行良好，但当然不是我真正需要的浏览器。

我在 标签中有两个过滤器：一个用于 return 字体图标名称，另一个用于提供颜色样式。问题是一个过滤器运行正常，它给我图标名称，但另一个过滤器运行正常，它给我颜色。

这是我的 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 上打开开发工具时，我可以看到 'color' 样式在 Firefox 中正确呈现，但在 IE 中根本没有 'color' 样式。我在 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;，因此 ngAttrStyle 指令仅在插值后才设置 style 属性。