current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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?

share|improve this question

3 Answers 3

up vote 2 down vote accepted

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']);
share|improve this answer
    
Thank you, works great. –  user2656127 Feb 26 at 15:58
up vote 1 down vote

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.

share|improve this answer
    
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. –  user2656127 Feb 26 at 15:52
    
For that, you need to add ngSanitize as a submodule. –  asgoth Feb 26 at 15:52
    
Works, thank you so much –  user2656127 Feb 26 at 15:57
up vote 0 down vote

use ng-bing-html directive

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

<div class="actContent" ng-bing-html="statusUpdate.text"></div>
share|improve this answer
    
Ok great, but what would I use as the expression? ng-bind-html="expression" Thanks ! –  user2656127 Feb 26 at 15:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.