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.

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.

• javascript
• angularjs

• What AngularJS version are you using? – Klaster_1 Нет войне Commented Dec 13, 2013 at 4:29
• You need to include the html string you're trying to use also. – m59 Commented Dec 13, 2013 at 4:31

2 Answers 2

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.

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

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