AngularJs：如何解码 HTML 中的 HTML 个实体？

Question

情况：

我正在构建一个网页，其内容被调用 API returns json 格式的数据。

问题是 html 标签作为 HTML 实体给出，必须对其进行解码。

示例：

这是我正在处理的 json 的示例：

&#60;p align=&#34;justify&#34;&#62;&#60;strong&#62;15&#60;sup&#62;th&#60;/sup&#62; HERE THERE IS A BOLD TEXT &#60;/strong&#62; HERE SOME NORMAL TEXT...

尝试：

我花时间研究它，它似乎比我想象的要难。查看 google 和类似的 SO 问题，一个可能的解决方案是使用 ng-bing-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);
    };
}])

Ng-bind-html 在 angular 视图中：

<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 实体？

Answer 1

添加 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 看下面的例子。

example

Answer 2

我认为在将它传递给 $sce 之前，您需要再执行一个 "decoding" 步骤。例如像这样：

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

演示： http://plnkr.co/edit/LrT4tgYtTu4CPrOAidra?p=preview

AngularJs：如何解码 HTML 中的 HTML 个实体？

AngularJs: How to decode HTML entities in HTML?

html

javascript

json

html-entities

angularjs