Applying filters on outputted HTML for AngularJS

Question

I created 2 filters in AngularJS autolink and nl2br.

autolink: converts a URL string to an <a> tag with the attributes rel="nofollow" target="_blank". I tried using ngSanitize with the linky filter, but it doesn't add the 2 attributes above to it, nor does it provide a way to do it with the exising API.

nl2br: converts new lines to <br> tags.

I want to apply these 2 filters to {{ comment }} using {{ comment | autolink | nl2br }} in my HTML, but the filters are applied before AngularJS does the HTML escaping which results in the <a> and <br> to be escaped as well. Basically, I want to apply the filters after the escaping took place.

Is there a way to do this with AngularJS?

satchmorun · Accepted Answer · 2013-02-20 21:10:09Z

13

If you have a standard interpolation in your HTML, Angular will escape it:

<div> {{ var | filter1 | filter2 }} </div>

The result of the whole expression will be escaped.

What you want is ng-bind-html-unsafe (docs here). You can expression basically the same thing as above as:

<div ng-bind-html-unsafe='var | filter1 | filter2'></div>

Now the result of the expression won't be sanitized, and will be inserted as the contents of the div.

EDIT: Note that there's also ng-bind-html, which will still produce HTML, but will sanitize it first ($sanitize docs).

ng-bind-html lives in the ngSanitize module, so you'll have to make sure that you've declared it as a dependency in your angular.module call.

edited Feb 20, 2013 at 21:10

answered Feb 20, 2013 at 20:28

satchmorun

12.5k2 gold badges43 silver badges27 bronze badges

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

7 Comments

ademers Over a year ago

But I want the comment, in my case, to be escaped; with the 2 filters applied after the escaping.

satchmorun Over a year ago

Ah, then use ng-bind-html instead of ng-bing-html-unsafe. I've added that to the answer.

ademers Over a year ago

I did do that as stated in my original post. But I want everything escaped THEN apply my filters. ng-bind-html will safely escape some HTML and will leave some basic html tags alone. Also with ng-bind-html, it will remove the href attribute that I am defining with my autolink filter.

satchmorun Over a year ago

ng-bind-html is different from using curly braces. See jsfiddle.net/GqNxT - the href isn't stripped.

satchmorun Over a year ago

Ok, last try, as I think you're misunderstanding me. (1) have some data in $scope.comment. (2). inject $sanitize and sanitize just the comment $scope.sanitizedComment = $sanitize(@scope.comment). (3) Use sanitizedComment in your HTML <div ng-bind-html-unsafe='sanitizedComment | autolink | nl2br></div>. That way you only sanitize the comment, then the filters are applied unsafely, as-is, with ng-bind-html-unsafe.

|

Collectives™ on Stack Overflow

Applying filters on outputted HTML for AngularJS

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related