How to modify innerHTML by evaluating an angular expression

Question

I am trying to do something like this

<div id="{{item.id}}" ng-repeat="item in itemList">
    {{item.innerHTML}}
</div>

item.innerHTML contains the html that needs to go there, but since it is part of the dom, it is replaced as a string. Is there a way to just have it replace the innerHTML?

Thanks!

mpm · Accepted Answer · 2013-01-09 17:37:25Z

36

You need to use ngBindHtml :

http://plnkr.co/edit/n1rLzgEZQoa2tJf0qnVZ?p=preview

in the controller :

$scope.content = "<b>this is bold content</b>";

html :

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

you'll need the following module :

http://code.angularjs.org/1.0.3/angular-sanitize.js

Be sure to declare ngSanitize as a module dependancy, for instance :

var app = angular.module('angularjs-starter', ["ngSanitize"]);

answered Jan 9, 2013 at 17:37

mpm

20.2k7 gold badges52 silver badges56 bronze badges

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

5 Comments

pkrish Over a year ago

I tried this, but it does not seem to work. This is what I get in the html <div id="item1"> <div ng-bind-html="<p>item1 description</p>" class="ng-binding"></div> </div> . Am I missing something?

mpm Over a year ago

the exemple works as far as i know : plnkr.co/edit/n1rLzgEZQoa2tJf0qnVZ?p=preview you must have forgot to do something, also dont put {{}} in ng-bind-html since it is an expression.

pkrish Over a year ago

Thanks! That worked. I thought you use {{}} to evaluate expressions? docs.angularjs.org/guide/expression

Joe zhou Over a year ago

@mpm 's answer works! But just as a reminder, don't forget to include "angular-sanitize.js" in your application. And also as mpm mentioned, don't forget to declare module dependancy.

krmld Over a year ago

Angular 4: to pass HTML as variable you can use <tag [innerHTML]="passHTML"><tag>

Collectives™ on Stack Overflow

How to modify innerHTML by evaluating an angular expression

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related