How to output html from a filter in Angular

Question

I have defined a filter as follows

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

so depending on the status, I can get one icon or the other one. I'm using it inside a span tag using the ng-bind-html-unsafe directive:

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

Instead of having the icon displayed inside the span element, I'm getting this:

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

Any idea of what I'm doing wrong?

Thanks!!

aalbagarcia · Accepted Answer · 2013-12-03 18:40:52Z

4

I solved it by injecting $sce service in my filter:

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..."
])

and using ng-bind-html in the span element:

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

answered Dec 3, 2013 at 18:40

aalbagarcia

1,0447 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Darryl Over a year ago

Odd, I had a need to do the very same thing today, but it worked without having to inject $sce. All I did was add <div ng-bind-html="field | myFilterFn"></div> to my view and inject ngSanitize in my module using angular.module('myModule', ['ngSanitize']) and the HTML returned.

aalbagarcia Over a year ago

To be honest, I did not try to access $sce.trustAsHtml without injecting it, I just assumed I had to do it. I just removed the injection and got "ReferenceError: $sce is not defined" error.

Darryl Over a year ago

What I meant was to remove the $sce injection and then simply return "<i class='icon-thumbs-up'></i>". It worked for me.

Darryl · Accepted Answer · 2013-12-03 17:18:43Z

2

Did you include the Sanitize module in your controller? Without it the attribute will just be interpreted as a non-angular attribute. It appears in your example that you just need ng-bind-html, so perhaps give that a try.

answered Dec 3, 2013 at 17:18

Darryl

1,4511 gold badge12 silver badges19 bronze badges

2 Comments

aalbagarcia Over a year ago

I added the ngSanitize module, which was missing, and injected $sanitize in my controller. I got the same output when using ng-bind-html-unsafe. When I use ng-bind-html, at least I get content inside the span tag. I'll have a look at the $sanitize docs. Thanks for the tip!

aalbagarcia Over a year ago

I solved it injecting $sce service into my filter and using $sce.trustAsHtml

Collectives™ on Stack Overflow

How to output html from a filter in Angular

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related