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>

Answer 2

you can also use $sce.trustAsHtml('"<h1>" + str + "</h1>"')，if you want to know more detail, please refer to $sce