Question

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

我在＆lt; i＆gt;中有两个过滤器。 tag：一个返回字体真棒图标名称，另一个提供颜色样式。问题是一个过滤器运行正常，它给了我图标名称，但没有给我颜色。

这是我的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;，因此ngAttrStyle指令仅在插入后设置style属性。

angularjs过滤器不在IE9中执行

1 个答案: