Question

我已经定义了一个过滤器，如下所示

@angular.module('extcomFilters',[]).filter('status_icon',()->
  (input) ->
    if input <=0
      "<i class='icon-thumbs-down'></i>"
    else
      "<i class='icon-thumbs-up'></i>"
)

因此，根据状态，我可以获得一个图标或另一个图标。我在使用ng-bind-html-unsafe指令的span标记中使用它：

 <span data-ng-bind-html-unsafe="{{status | status_icon}}"></span>

而不是在span元素中显示图标，我得到了这个：

<span data-ng-bind-html-unsafe="&lt;i class='icon-thumbs-up'&gt;&lt;/i&gt;"></span>

知道我做错了什么？

谢谢！

Answer 1

我通过在我的过滤器中注入$ sce服务来解决它：

filter('status_icon',['$sce', ($sce)->
  (input) ->
    if input == null or input == ''
      return $sce.trustAsHtml("<i class='icon-thumbs-down'></i>")
    else if input >= 0
      return $sce.trustAsHtml("<i class='icon-thumbs-up'></i>")
    else if input < 0
      return "loading..."
])

并在span元素中使用ng-bind-html：

 <span data-ng-bind-html="status | status_icon"></span>

Answer 2

您是否在控制器中包含了Sanitize模块？没有它，属性将被解释为非角度属性。在您的示例中，您只需要ng-bind-html，所以也许尝试一下。

如何从Angular中的过滤器输出html

2 个答案: