AngularJS – Render HTML in template

If you have a $scope variable containing a HTML string, the following example would escape the HTML and print it strictly to the screen.

Controller

$scope.htmlString = "<h2>Hello World</h2>";

Template

<div>{{ htmlString }}</div>

 

If you want to render HTML, add a filter.

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

 

Then in the template

<div ng-bind-html="htmlString | unsafe"></div>

 

Done =)

Reference: StackOverflow – How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.