Rendering HTML in a <div> - AngularJS

Question

So I have the following div and what I'd like to do, is have the div render HTML if it exists inside {{statusUpdate.text}}.

What I've done, is wrap the usernames in the span you see below - but I'd like it to be rendered as actualy HTML, today it's just the HTML in plain text.

<div ng-repeat="statusUpdate in statusUpdates | orderBy:'-time'">
  <div class="actContent">{{statusUpdate.text}}</div>
</div>

Currently I just get this as output - see below - and this is the output in the browser

enter image description here

<div class="actContent ng-binding">hello &lt;span class='mentionedUserTag'&gt;Aref Abedi&lt;/span&gt; how are you?
</div>

Any ideas on how to solve this?

asgoth · Accepted Answer · 2014-02-26 15:54:32Z

13

Use ng-bind-html:

<div ng-repeat="statusUpdate in statusUpdates | orderBy:'-time'">
  <div class="actContent" ng-bind-html="statusUpdate.text"></div>
</div>

Don't forget to add ngSanitize, which is in a different js file (angular-sanitize.js):

app.module('app', ['ngSanitize']);

answered Feb 26, 2014 at 15:54

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

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

2 Comments

dsdsdsdsd Over a year ago

why did this situation require sanitize

Kolappan N Over a year ago

@dsdsdsdsd Because by default, the resulting HTML content will be sanitized using the $sanitize service to remove dangerous code if present. You can read more about this in the official page.

Frederik Kammer · Accepted Answer · 2014-02-26 15:50:39Z

1

AngularJS escapes html by default. To render the HTML you have to use ng-bind-html like this:

<div ng-repeat="statusUpdate in statusUpdates | orderBy:'-time'">
  <div class="actContent" ng-bind-html="statusUpdate.text"></div>
</div>

You might get an error like:
Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.
Use $sce.trustAsHtml(input) in your controller or filter to fix this.

answered Feb 26, 2014 at 15:50

Frederik Kammer

3,1773 gold badges30 silver badges29 bronze badges

2 Comments

user2656127 Over a year ago

So, I got that exact error just now. Could you point me in the right direction regarding the controller? I'm unsure how to implement.

asgoth Over a year ago

For that, you need to add ngSanitize as a submodule.

Jasmine · Accepted Answer · 2015-11-19 23:40:00Z

0

use ng-bind-html directive

API ref - http://docs.angularjs.org/api/ng/directive/ngBindHtml

<div class="actContent" ng-bind-html="statusUpdate.text"></div>

edited Nov 19, 2015 at 23:40

Jasmine

4,0272 gold badges32 silver badges39 bronze badges

answered Feb 26, 2014 at 15:48

doodeec

2,92721 silver badges23 bronze badges

1 Comment

user2656127 Over a year ago

Ok great, but what would I use as the expression? ng-bind-html="expression" Thanks !

Collectives™ on Stack Overflow

Rendering HTML in a <div> - AngularJS

3 Answers 3

2 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Related