Angular Recipe: Insert html string from js into html (solve Error: [$sce:unsafe])

Angular JS

Insert html string from js into html

If u'll try to insert the string with html tags as it

<div "<p>Some Cool Text</p>"</div>

U'll see just a string with it's tags instead of html

<p>Some Cool Text</p>

To insert it like html u've to use ng-bind-html directive @see Angular API - NgBind

<div ng-bind-html="'<p>Some Cool Text</p>'"></div>   

However to avoid security vulnerabilities it's avoided to insert html, so u'll receive the following error:

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

---

Get ng-bind-html working

To resolve this problem you have to use '$sce' @see Angular API - Strict Contextual Escaping

.html

<div ng-bind-html="getHTMLString()"></div>  

.js

$scope.getHTMLString = function(){
    return $sce.trustAsHtml("<p>Some Cool Text</p>");
};

Well Done (output):

Some Cool Text

Be aware: Generated html string with some ng-directive tags inside (e.g. ng-src) won't work if you will try to insert it via ng-bind-html :(

---

see Also

• Keynote: AngularJS Routing
• Keynote: AngularJS Do the custom things
• Keynote: AngularJS Do the regular things
• Keynote: AngularJS Basics
• Bootstrap Components
• AngularJS - API
• AngularJS - httpBackend
• AngularJS - Developer Documentation
• AngularJS - ShapingUP course slides
• AngularJS - StayingSharp course slides
• AngularJS - Receipes with Angular
• AngularJS - Receipes github
• AngularJs - Select Options
• Tutorials Point - AngularJS
• Tutorials Point - BestPractices
• Keynote: Top JS frmeworks 2015