Angularjs convert string to html in view

Question

I am currently trying to add links in my view. I do have links which basically contains html tags as strings. I tried:

<p data-ng-repeat='i in links' >{$ i.link $}</p>

which basically just deploy in my view : mylink

So I did try:

<p data-ng-repeat='i in links' ><span data-ng-bind-html="i.link"></span></p>

It doesn't work though, any idea how could I achieve this ?

Thanks.

Please, provide more details, could you expose your controller that represents it? — felipekm
– felipekm, Commented Apr 20, 2015 at 16:24
rather than include the html markup in your strings, use ng-href and have your string contain simply the URL — Ronnie
– Ronnie, Commented Apr 20, 2015 at 16:25
when you use ng-bind-html or data-ng-bind-html, make sure you have added ngSanitize in ur module dependency angular.module('app', ['ngSanitize']) docs.angularjs.org/api/ngSanitize/filter/linky — BeingDev
– BeingDev, Commented Apr 20, 2015 at 16:27
from the docs: ng-bind-html Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application. docs.angularjs.org/api/ng/directive/ngBindHtml — Ataur Rahim Chowdhury
– Ataur Rahim Chowdhury, Commented Apr 20, 2015 at 16:27

Dominic Scanlan · Accepted Answer · 2015-04-20 19:29:25Z

2

Add the $sce as a dependancy of the module

angular.module('myApp', ['$sce']);

When getting the links

angular.forEach($scope.links, function(value){
    value.link = $sce.trustAsHtml(value.link);
});

Using Safe Contextual Escaping (docs.angularjs.org/api/ng/service/$sce) and using trustAs delegate you're telling Angular that this value is safe to use within that context. In this example. $sce.trustAsHtml returns an object that angular can trust is safe to as HTML.

edited Apr 20, 2015 at 19:29

answered Apr 20, 2015 at 16:30

Dominic Scanlan

1,0091 gold badge6 silver badges12 bronze badges

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

3 Comments

Markus W Mahlberg Over a year ago

Mind to explain your solution a bit?

Dominic Scanlan Over a year ago

sure, using Safe Contextual Escaping (docs.angularjs.org/api/ng/service/$sce) and using trustAs delegate you're telling Angular that this value is safe to use within that context. In this example. $sce.trustAsHtml returns an object that angular can trust is safe to as HTML.

Markus W Mahlberg Over a year ago

Please use the edit button to add this to your answer ;)

Michael Hays · Accepted Answer · 2015-04-20 16:36:26Z

1

In the first case, you'll actually want to use:

<p data-ng-repeat='i in links' >{{ i.link }}</p>

Double braces, not brace-dollar. In the second case, ng-bind-html will require that you have added "ngSanitize" to your module's dependency list.

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

Edit:

If you really do want clickable links on the page, then do pretty much what @sreeramu suggested (Though I'd see if you can't find a way to add a nice description):

<p data-ng-repeat='i in links' ><a ng-href="{{i.link}}">{{i.desc}}</a></p>

(Notice that he suggested using ng-href, instead of href. He's right.)

edited Apr 20, 2015 at 16:36

answered Apr 20, 2015 at 16:29

Michael Hays

6,9082 gold badges23 silver badges17 bronze badges

Comments

Vladimir Vagaytsev · Accepted Answer · 2016-07-25 18:19:34Z

0

Insert ngSanitize as a dependency to you app:

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

But before be ensure that you are including the script angular-sanitize.js. Good luck!

edited Jul 25, 2016 at 18:19

Vladimir Vagaytsev

2,8919 gold badges36 silver badges38 bronze badges

answered Jul 25, 2016 at 17:29

sara free

32 bronze badges

Comments

echology · Accepted Answer · 2018-01-09 17:34:45Z

0

It might be that your links have already got the a tags with it so in this case you do not need to re-add the a tags...

In this case do this...

Add this to you scripts (include acc. to your angular version)

<script type="text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-
sanitize.min.js"></script>

Add this to your app.js

var app = angular.module('modulename', [ 'ngSanitize']);

And than in your view do this If it is the div that you want the link to attach to...

<div ng-bind-html="i.link"></div>

The above would give you something as this

<div><a href='your link'></a></div>

answered Jan 9, 2018 at 17:34

echology

3972 gold badges3 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angularjs convert string to html in view

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related