How to render html with AngularJS templates

Question

This is my template:

<div class="span12">   <ng:view></ng:view> </div> 

and this is my view template:

<h1>{{stuff.title}}</h1>  {{stuff.content}} 

I am getting the content as html and I want to display that in a view, but all I am getting is raw html code. How can I render that HTML?

Answer 1

Use-

<span ng-bind-html="myContent"></span> 

You need to tell angular to not escape it.

Answer 2

To do this, I use a custom filter.

In my app:

myApp.filter('rawHtml', ['$sce', function($sce){   return function(val) {     return $sce.trustAsHtml(val);   }; }]); 

Then, in the view:

<h1>{{ stuff.title}}</h1>  <div ng-bind-html="stuff.content | rawHtml"></div>