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.

Blake · Accepted Answer · 2014-11-07 20:09:28Z

93

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>

edited Nov 7, 2014 at 20:09

Blake

1,7612 gold badges15 silver badges23 bronze badges

answered Feb 7, 2013 at 22:55

Ganaraj

26.8k6 gold badges68 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sir Robert Over a year ago

Thanks! That worked. Made some edits: Fixed the link (SO parsed it weirdly), changed "ng-bind-html" to "ng-bind-html-unsafe", and gave a more full example.

Matt Over a year ago

It's ng-bind-html-unsafe up until 1.0.8, after that it's just ng-bind-html because the safe and unsafe functions were merged github.com/angular/angular.js/blob/master/…

igreulich Over a year ago

@AakilFernandes, I had to add ngSanitize to my main module for ng-bind-html to work.

Python Basketball · Accepted Answer · 2017-03-07 06:50:06Z

15

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

edited Mar 7, 2017 at 6:50

answered Oct 21, 2015 at 3:50

Python Basketball

2,3803 gold badges27 silver badges47 bronze badges

Collectives™ on Stack Overflow

AngularJS: Insert HTML from a string

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related