AngularJS - Render HTML tags that are contained in a string

Question

My database stores product information, and a lot of this is organised into lists. I load the data into Angular as $scope.post.

For instance,

$scope.post.size_description = '<li> Fits true to size. Take your normal size\r</li>
   <li> Slim-cut, mid-rise style</li>
   <li> Long in length, alter to fit</li>
   <li> Model wears an IT 48\r</li>
   <li> Model measures: waist size 32, height 6\'1"/ 185cm\r</li>'.

When I try to load this data into my Angular app, it gets rendered as text (i.e. the <li> are not parsed). I understand this probably happens for security reasons, but is there any way around it?

possible duplicate of Insert HTML into view using AngularJS

Ian Mercer
– Ian Mercer

2013-07-24 06:34:52 +00:00
Commented Jul 24, 2013 at 6:34 — Ian Mercer
– Ian Mercer, Commented Jul 24, 2013 at 6:34
Have a look: docs.angularjs.org/api/ng.$compile

Ivan Chernykh
– Ivan Chernykh

2013-07-24 06:35:25 +00:00
Commented Jul 24, 2013 at 6:35 — Ivan Chernykh
– Ivan Chernykh, Commented Jul 24, 2013 at 6:35
I've found a more complete answer here: link

gianlucabr
– gianlucabr

2014-08-12 15:17:50 +00:00
Commented Aug 12, 2014 at 15:17 — gianlucabr
– gianlucabr, Commented Aug 12, 2014 at 15:17

Community · Accepted Answer · 2017-05-23 10:30:05Z

14

As Damax has said here: https://stackoverflow.com/a/11640420/769083

<div ng-bind-html-unsafe="post.size_description"></div>

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Jul 24, 2013 at 6:42

mnsr

12.4k4 gold badges55 silver badges80 bronze badges

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

1 Comment

Cumulo Nimbus Over a year ago

ng-bind-html-unsafe has been depreciated since Angular 1.2. See stackoverflow.com/questions/9381926/…

Andy · Accepted Answer · 2018-02-28 14:10:22Z

8

ngBindHtml worked for me. See more in the docs here: https://docs.angularjs.org/api/ng/directive/ngBindHtml

<div ng-bind-html="post.size_description"></div>

answered Feb 28, 2018 at 14:10

Andy

1273 silver badges9 bronze badges

Collectives™ on Stack Overflow

AngularJS - Render HTML tags that are contained in a string

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related