javascripthtmljsonangularjsng-bind-html

How to render raw html with AngularJS?

I'm creating an AngularJS single page application. The data will be fetched from a webservice in json-format.

The problem is that some text elements come with preformatted html tags

json output:

{
   "text": "<p><span style="text-decoration: underline;"><strong>test text</string></span></p>"
}

Now how can I display this text and render the html directly, so that only "test" is shown to the user and the rest serves as markup?

<h1>{{data.text}}</h1>
Solution

  • You need to add ng-bind-html="data.text" to your h1 tag.

    Your html would look like:

    <h1 ng-bind-html="data.text"></h1>

    Documentation: ngBindHtml