angularjs: how to inject HTML code from controller model

Question

My controller holds a description which is plain HTML code. I want this to be injected into a given tag so that it is rendered according to the tags it contains.

I tried the following but the HTML is rendered in the attribute whereas I expected to be into the tag itself.

<div ng-bind-html-unsafe="{{stage.description}}"></div>

Steve Parish · Accepted Answer · 2014-09-13 18:51:10Z

4

Remove the curly braces. The curly braces is just the templating tags. You want to bind the actual variable.

<div ng-bind-html-unsafe="stage.description"></div>

edited Sep 13, 2014 at 18:51

answered Apr 23, 2014 at 14:25

Steve Parish

1,9042 gold badges14 silver badges12 bronze badges

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

Comments

Daniel Cheng · Accepted Answer · 2014-04-23 14:24:06Z

2

I don't remember since when AngularJS does not allow this anymore.

What you need to do is to include the AngularJS Sanitize library. You can download the sanitize library somewhere here: https://code.angularjs.org/1.2.16/

In your module

angular.module('myModule', ['ngSanitize'])

In your template

<div ng-bind-html="stage.description"></div>

answered Apr 23, 2014 at 14:24

Daniel Cheng

8705 silver badges14 bronze badges

5 Comments

Eduard Gamonal Over a year ago

ng-bind-html-unsafe was deprecated in v 1.2.0 github.com/angular/angular.js/blob/master/…

Stéphane de Luca Over a year ago

I did include sanitize module and switched to ng-bind-html. Something I don"t get is that stage.description content is causing error as follows: Error: [$parse:syntax] Syntax Error: Token 'span' is an unexpected token at column 2 of the expression [<span>Coucou <hr/>Coucou</span>] starting at [span>Coucou <hr/>Coucou</span>].

Stéphane de Luca Over a year ago

Ok. I had to get rid of the doubled embracing curly braces.

Neel Over a year ago

you are right @StéphanedeLuca I had a same issue and removing the curly brackets fixed the $parse:syntax error. Also I didint need to include the ngSanitize module neither in the current Angular 1.3. It worked without it.

Neel Over a year ago

I believe it worked for me without ngSanitize because I used $sce.trustAsHtml. If I dont use that I believe I have to use ngSanitize module for this to work.

Collectives™ on Stack Overflow

angularjs: how to inject HTML code from controller model

2 Answers 2

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Related