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 实体? [复制]的主要内容,如果未能解决你的问题,请参考以下文章