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+

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s