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

尝试:

我花时间研究它,它似乎比我想象的更难.看看谷歌和类似的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:

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

OUTPUT:

这是视图中的输出(完全如您所见):

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

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

这里有一个粗文字正常文字......

问题:

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

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

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

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看到下面的例子.

例