How to render html with AngularJS templates

68

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?

This question is tagged with javascript angularjs

~ Asked on 2013-04-02 01:12:30

The Best Answer is


100

Use-

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

You need to tell angular to not escape it.

~ Answered on 2013-04-02 01:14:53


50

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>

~ Answered on 2014-08-26 07:31:55


Most Viewed Questions: