AngularJs:如何在 HTML 中解码 HTML 实体? [复制]

Posted

技术标签:

【中文标题】AngularJs:如何在 HTML 中解码 HTML 实体? [复制]【英文标题】:AngularJs: How to decode HTML entities in HTML? [duplicate] 【发布时间】:2015-09-26 05:30:27 【问题描述】:

情况:

我正在构建一个网页,该网页调用一个以 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>

输出:

这是视图中的输出(与您看到的完全一样):

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

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

这里是粗体字这里是一些普通文字...

问题:

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

【问题讨论】:

【参考方案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

【讨论】:

trust - 不信任,验证。它对我不起作用。【参考方案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,请参见下面的示例。

example

【讨论】:

非常感谢!工作正常!我接受另一个只是因为它可以更重用,并且需要更少的代码。但你的答案也是正确的。我可以加分并在我的问题的编辑中指定它。

以上是关于AngularJs:如何在 HTML 中解码 HTML 实体? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

如何在 AngularJS 中动态添加指令?

Angularjs:如何将图层添加到外部模板中?

如何在 Java 环境中解码 H.264 视频帧

AngularJS通过标签选择遵循指令的DOM元素

使用 textarea 开发 jQuery HTML 解码

如何延迟 AngularJS 即时搜索?