AngularJS: Insert HTML from a string

Question

I've looked a LOT for this, but I either I can't find the answer or I don't understand it. A specific example will win the vote =)

• I have a function that returns an HTML string.
• I can't change the function.
• I want the html represented by the string to be inserted into the DOM.
• I'm happy to use a controller, directive, service, or anything else that works (and is reasonably good practice).
• Disclaimer: I don't understand $compile well.

Here's what I've tried:

// My magic HTML string function. function htmlString (str) {     return "<h1>" + str + "</h1>"; }  function Ctrl ($scope, $compile) {   $scope.htmlString = htmlString; } Ctrl.$inject = ["$scope", "$compile"]; 

That didn't work.

I tried it as a directive too:

// My magic HTML string function. function htmlString (str) {     return "<h1>" + str + "</h1>"; }  angular.module("myApp.directives", [])   .directive("htmlString", function () {     return {       restrict: "E",       scope: { content: "@" },       template: "{{ htmlStr(content) }}"     }   });    ... and in my HTML ...    <html-string content="foo"></html-string> 

Help?

Note

I looked at these, among others, but couldn't make it work.

• AngularJS : Insert HTML into view
• AngularJS $http HTML Parser
• angularjs - inserting $compile-d html
• AngularJS doesn't execute in HTML inserted with document.write()
• Escape HTML text in an AngularJS directive

Answer 1

Have a look at the example in this link :

http://docs.angularjs.org/api/ngSanitize.$sanitize

Basically, angular has a directive to insert html into pages. In your case you can insert the html using the ng-bind-html directive like so :

If you already have done all this :

// My magic HTML string function. function htmlString (str) {     return "<h1>" + str + "</h1>"; }  function Ctrl ($scope) {   var str = "HELLO!";   $scope.htmlString = htmlString(str); } Ctrl.$inject = ["$scope"]; 

Then in your html within the scope of that controller, you could

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