AngularJS: How to display html data in view?

Question

I am implementing a control to display a list of comments, with AngularJS + Bootstrap.
It's something like this:

  <div class="comments">
    <div ng-repeat="(id, comment) in person.comments" class="row">
      <div class="form-group">
        <div class="col-xs-12">
          <div class="input-group">
            <span class="input-group-addon vertical-align-top">
              <div><i>Date:</i> {{ comment.date }}</div>
              <div><i>By:</i> {{ comment.author }}</div>
            </span>
            <div class="form-control form-control-content">
              {{ comment.content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Everything's o.k..
The problem is: comment.content is HTML data (for example it contains line-breaks, hyperlinks, style-formatting, ...). By default HTML is rendered as plain text.

The question is: how do I display data as HTML inside a div?

http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html — tymeJV, Feb 10 '15 at 19:27

score 1 · Accepted Answer · answered Feb 10 '15 at 19:28

1

You can use ng-bind-html.

<div class="form-control form-control-content" ng-bind-html="comment.content"></div>

answered Feb 10 '15 at 19:28

Danny Blue

463
4
16

score 1 · Answer 2 · answered Feb 10 '15 at 19:28

If you want {{comment.content}} to be interpreted as HTML, you need to look at ngBindHtml directive.

So you'd need to modify it:

<div ng-bind-html="comment.content" class="form-control form-control-content"></div>

You'll have to add $sanitize into your project dependencies, as is noted in the ngBindHtml doc link above.

AngularJS: How to display html data in view?

2 Answers2