Rendering json data (having anchor tag) to html page

Question

I have json data having anchor tag .

task.json

{
    "data": [{
        "id": 1,
        "title": "Launch an EC2 Instance",
        "desc": "Needed an <a href='#'>EC2</a> instance to deploy the ccr code",
        "status": "done",
        "percentage_finished": 100
    }]
}

I am using angularjs to render this data to my html page . But anchor tag is not working. It prints as it is as Text.

<div class="task-pn panel panel-primary">
     <div class="panel-heading"><b>Description : Task-{{task_detail.id}}</b></div>
     <div class="panel-body"> 
         <div onclick="this.contentEditable='true';">{{task_detail.desc}}</div>  
     </div>
</div>

Output img.

enter image description here

I need a simple link to EC2 word .How to deal with this isuue?

http://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs — eRIZ, Dec 05 '13 at 10:14
Thanks!! above link helps me. Now its working using ngSanitize module and ng-bind-html — Anil Arya, Dec 05 '13 at 10:44

score 1 · Answer 1 · answered Dec 05 '13 at 10:16

1

You need something like this:

In your controller:

scope.trustedHtml = sce.trustAsHtml(json.desc);

And to use it in your partial:

<p class="org-desc" ng-bind-html="trustedHtml"> </p>

answered Dec 05 '13 at 10:16

user2720708

455
2
8
19

score 0 · Accepted Answer · edited May 23 '17 at 12:03

user2720708 :Thanks for sharing your ideas.

eRIZ gave this link .There I used the idea of Luke Madera.

Current working html page .

<div class="task-pn panel panel-primary">
   <div class="panel-heading"><b>Description : Task-{{task_detail.id}}</b></div>
   <div class="panel-body"> 
      <div contentEditable" ng-bind-html="task_detail.desc"></div>  
   </div>
</div>

and Then I follow only two steps :

1.include the angular-sanitize.min.js resource, i.e.:

2.In a js file (controller or usually app.js), include ngSanitize, i.e.: angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize']) ---------from answer given by Luke Madera

Its working now ...:)

Rendering json data (having anchor tag) to html page

2 Answers2