AngularJs：如何在HTML中解码HTML实体？

Question

情况:

我正在建立一个网页，其中的内容是通过调用返回JSON格式数据的API来获取的。

问题是HTML标记以HTML实体形式给出，必须进行解码。

示例:

这是我要处理的JSON示例：

<p align="justify"><strong>15<sup>th</sup> HERE THERE IS A BOLD TEXT </strong> HERE SOME NORMAL TEXT...

尝试：

我花了时间研究它，似乎比我想象的难。在 Google 和类似的 SO 问题中查找，可能的解决方案是使用 ng-bind-html。

API 调用：

$http.get('http://API/page_content').then(function(resp) 
{
    $scope.content_test = resp.data[0].content; 
}

筛选：

.filter('trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}])

在Angular视图中使用ng-bind-html：

<div ng-bind-html=" content_test  | trusted"></div>

输出：

这是视图中的输出（与您看到的完全相同）：

<p align="justify"><strong>15<sup>th<\/sup> HERE THERE IS A BOLD TEXT<\/strong> HERE SOME NORMAL TEXT...

但我需要看到的是文本格式正确：

这里有一段加粗的文字这里是一些普通的文字...

问题：

如何在AngularJs中解码HTML实体以获得正确格式的HTML？

- FrancescoMussi

Answer 1

我认为在将其传递给$sce之前，您需要执行另一个“解码”步骤。例如，可以按照以下方式执行：

app.filter('trusted', ['$sce', function($sce) {
    var div = document.createElement('div');
    return function(text) {
        div.innerHTML = text;
        return $sce.trustAsHtml(div.textContent);
    };
}]);

Demo: http://plnkr.co/edit/LrT4tgYtTu4CPrOAidra?p=preview

- dfsq

---

信任 - 不要信任，要验证。这对我不起作用。 - Mars Robertson

Answer 2

添加 angular.sanitize.js。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js"></script>

将此依赖项添加为：

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

现在对HTML字符串进行解码，并将其传递给ng-bind-html。

$http.get('http://API/page_content').then(function(resp) 
{
    var html = resp.data[0].content; 

    var txt = document.createElement("textarea");
    txt.innerHTML = html;


    $scope.content_test = txt.value;

    //if you use jquery then use below
    //$scope.content_test = $('<textarea />').html(html).text();        
}

<div ng-bind-html="content_test"></div>

我认为你可以避免使用filter，看下面的例子。

例子

- Kalhan.Toress

---

非常感谢！它正常工作了！我接受了另一个答案，因为它可以更具可重用性，代码量更少。但是你的答案也是正确的。我可以给你一个加号，并在编辑我的问题时指定它。 - FrancescoMussi