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

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

我通过在我的过滤器中注入(inject) $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>