javascript - AngularJs:如何解码 HTML 中的 HTML 实体？

标签 javascript html json angularjs html-entities

<分区>

情况:

我正在构建一个网页，该网页调用一个以 json 格式返回数据的 API。

问题是 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...

尝试:

我已经花时间研究它，它似乎比我想象的要难。查看谷歌和类似的 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);
    };
}])

Angular View 中的 Ng-bind-html:

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

输出:

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

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

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

这里有一个粗体文本 这里有一些正常的文本...

问题:

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

最佳答案

我认为在将它传递给 $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

关于javascript - AngularJs:如何解码 HTML 中的 HTML 实体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31290396/

上一篇：javascript - .preventDefault() 无法正常工作。 ('input', 函数{})

下一篇：python - 在 Django 中发送 html 电子邮件

相关文章：

javascript - 在 HTML 中向下滚动时将导航栏移动到顶部

javascript - 迭代 Swagger YAML 文件以动态生成属性列表

java - 使用 Jackson 1.9 解析 json 时出现问题

c++ - 通过使用boost属性树解析JSON文件来访问 bool 值

javascript - Jquery on expand，输入框不在标签旁边

javascript - 如何一键将 CSS 样式应用到具有相同 ID 的所有元素？

javascript - jquery 提交事件并返回 false

javascript - 使用node-postgres执行查询时，aws lambda不返回任何内容

html - 如何将 cordova apk 转换为 html 源而不是 java

jquery - 尝试在 jquery 中旋转按钮？