How to insert html into a view (Mini-challenge 6) Answer

This is the answer to the Mini-challenge 6 How to insert html code into a view in a controller variable

Check out Mini-challenge 6 Instructions to insert html code into a view

Answer:How to insert html into a view (Mini-challenge 6) Answer

It is not trivial to print an html in the angularjs view where the content is stored in a variable in the scope.

For Angular 1.3 you can use ng-bind-html in the HTML view:


<div ng-bind-html="html"></div>

and you can use $sce service in the controller to convert the html string.

 $scope.html = $sce.trustAsHtml("
<div>Hello World</div>

");

Notes for Angular 1.2, use:

<div ng-bind-html="html"></div>

The “OLD WAY” to do this is:

<div ng-bind-html="expression"></div>
//instead of
<div>{{expression}}</div>

 

Here is a working example:

If you have a solution for this challenge, different from the proposal solution on this post, don’t be shy and share it with us 🙂