AngularJS - ngBindHtml and 'unsafe' html

Question

I am trying to render some unsafe HTML (basically a HTML snippet with some inline styling) and have the following code in my view:

<div ng-repeat="snippet in snippets">
  <div ng-bind-html="snippet.content"></div>
</div>

All my styling gets removed...

I've heard of people using ngBindHtmlUnsafe however I couldn't find a reference to it and simply putting ng-bind-html-unsafe doesn't render anything.

Any help would be appreciated.

You need to include the html string you're trying to use also. — m59
– m59, Commented Dec 13, 2013 at 4:31

Lucas Lazaro · Accepted Answer · 2013-12-13 19:16:16Z

8

The ng-bind-html-escape was removed in AngularJs 1.2.

To achieve the same effect I would advise you to create a filter to trust the resource (you should include the $sce module ):

app.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    }; });

Usage:

<ELEMENT ng-bind-html="htmlValue | unsafe"></ELEMENT>

You shouldn't forget to include the ngSanitize as the app dependency:

angular.module('app', ['ngSanitize'])

Cheers.

edited Dec 13, 2013 at 19:16

answered Dec 13, 2013 at 4:46

Lucas Lazaro

1,5269 silver badges13 bronze badges

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

2 Comments

Lucas Lazaro Over a year ago

@Flek Hmm.. That's interesting. I said that simply because in the docs regarding ng-bind-html it says: "To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular.)". But I guess if you have a escaped html you don't need to. Thanks for the info though!

F Lekschas Over a year ago

Yes the docs confused me in the beginning as well. I just figured out that ngSanitizeis not needed because I forgot to include it once and it still worked.

F Lekschas · Accepted Answer · 2013-12-13 05:19:18Z

6

You can bypass it using $sce.trustAsHtml . See documentation

self.snippet.content = $sce.trustAsHtml('some html');

edited Dec 13, 2013 at 5:19

F Lekschas

12.9k12 gold badges67 silver badges75 bronze badges

answered Dec 13, 2013 at 4:31

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

Collectives™ on Stack Overflow

AngularJS - ngBindHtml and 'unsafe' html

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related