将 json 数据（具有锚标记）渲染到 html 页面答案

【问题标题】：Rendering json data (having anchor tag) to html page将 json 数据（具有锚标记）渲染到 html 页面
【发布时间】：2026-02-10 08:05:02
【问题描述】：

我有带有锚标记的 json 数据。

任务.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>

输出图片。

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

【问题讨论】：

*.com/questions/9381926/…
谢谢！！上面的链接对我有帮助。现在它使用 ngSanitize 模块和 ng-bind-html

标签： json html angularjs

【解决方案1】：

你需要这样的东西：

在您的控制器中：

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

并在你的部分中使用它：

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

【讨论】：

【解决方案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.include angular-sanitize.min.js 资源，即：

2.在一个js文件（控制器或者通常是app.js）中，包含ngSanitize，即： angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize']) ---------来自Luke Madera的回答

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

【讨论】：