How to render raw html with AngularJS?

Question

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>

Could this help ? http://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs — Baart, Aug 07 '15 at 14:32

MHX · Accepted Answer · 2015-08-07T14:44:00.460

21

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

edited Aug 07 '15 at 14:44

answered Aug 07 '15 at 14:37

MHX

1,581
2
21
31

That sounds promising, though when I use it I don't see any output anymore, just a blank element. – membersound Aug 07 '15 at 14:51
@membersound You seems have formatting issues in your json. Your attribute stule should use `'` instead of `"` else it breaks everything. But it's maybe just a typo there. – Pierre-Alexandre Moller Aug 07 '15 at 14:53
That's just a typo in my example here. – membersound Aug 07 '15 at 14:56
3

I was missing the `angular-sanitize` module, works now. – membersound Aug 07 '15 at 14:56

score 6 · Answer 2 · edited May 23 '17 at 12:08

Update2: is it possible to strip the html for you? It could be done so:

angular.module('myApp.filters', []).
   filter('htmlToPlaintext', function() {
      return function(text) {
         return String(text).replace(/<[^>]+>/gm, '');
      };
   }
);

And you html:

<div>{{myText | htmlToPlaintext}}</div>

See more information: angularjs to output plain text instead of html

Update: do you really need the html from your json? It's better to store your html in the views and get the data from your json. Nice separation and very easy to use.

It's possible, but not so easy as non-html (great security).

In Angular 1.3 you need as follows:

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

In your controller add this:

$scope.htmlBind = $sce.trustAsHtml('<span>Hi, I am <em>Joe</em>');

Explanation: you see the $sce:

$sce is a service that provides Strict Contextual Escaping services to AngularJS.

trustAs(type, value)

Delegates to $sceDelegate.trustAs. As such, returns an object that is trusted by angular for use in specified strict contextual escaping contexts (such as ng-bind-html, ng-include, any src attribute interpolation, any dom event binding attribute interpolation such as for onclick, etc.) that uses the provided value. See * $sce for enabling strict contextual escaping.

Read more here:

Is it possible to resolve this directly within html? Because I'm getting a `json` response and want to dynamically refer to the elements within html by `
` without having to call the `$sce` from within a controller. — membersound, Aug 07 '15 at 14:49
I cannot control the json response, and thus I'm forced to process preformatted html markups. — membersound, Aug 07 '15 at 14:55
No it's not possible because I'm required to show the text with interpreted markup as I get it. — membersound, Aug 07 '15 at 15:15
This is the best solution for me and only ng-bind-html needed — Richard Aguirre, Dec 19 '17 at 22:04

score -1 · Answer 3 · answered Aug 07 '15 at 14:37

-1

Try to use this https://docs.angularjs.org/api/ng/directive/ngBind

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Whirled';
    }]);
</script>
<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>

answered Aug 07 '15 at 14:37

RobertRPM

137
1
16

2

He wanted to print html, not a simple var. – Pierre-Alexandre Moller Aug 07 '15 at 14:46

How to render raw html with AngularJS?

3 Answers3