将json数据（具有锚标记）呈现到html页面

Question

我的json数据有锚标记。

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
    }]
}

我正在使用angularjs将此数据呈现到我的html页面。但锚标签不起作用。 它按原样打印为文本。

<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> 

输出img。

我需要一个简单的EC2字链接。如何处理这个问题？

Answer 1

你需要这样的东西：

在您的控制器中：

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

并在你的部分中使用它：

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

Answer 2

user2720708：感谢您分享您的想法。

eRIZ给了link。我使用了Luke Madera的想法。

当前正在使用的html页面。

<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> 

然后我只遵循两个步骤：

  

1.包括angular-sanitize.min.js资源，即：

     

2.在js文件（控制器或通常是app.js）中，包括ngSanitize，即：   angular.module（'myApp'，['myApp.filters'，'myApp.services'，   'myApp.directives'，'ngSanitize']）---------来自Luke Madera给出的答案

它现在正在工作...... :)