javascript AngularJs：如何解码 HTML 中的 HTML 实体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31290396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJs: How to decode HTML entities in HTML?
提问by FrancescoMussi
THE SITUATION:
情况：
I am bulding a webpage which content is taken calling an API that returns the data in json format.
我正在构建一个网页，该网页的内容被调用以 json 格式返回数据的 API。
The problem is that the html tags are given as HTML entities, that has to be decoded.
问题是 html 标签是作为 HTML 实体给出的，必须被解码。
EXAMPLE:
例子：
This is example of the json i am dealing with:
这是我正在处理的 json 示例：
<p align="justify"><strong>15<sup>th</sup> HERE THERE IS A BOLD TEXT </strong> HERE SOME NORMAL TEXT...
ATTEMPT:
试图：
I have spend time research it and it seems harder than i thought. Looking in google and similar SO question, a possible solution is to use the ng-bing-html
我花时间研究它，它似乎比我想象的要难。查看 google 和类似的 SO 问题，一个可能的解决方案是使用 ng-bing-html
Api call:
api调用：
$http.get('http://API/page_content').then(function(resp)
{
$scope.content_test = resp.data[0].content;
}
Filter:
筛选：
.filter('trusted', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}])
Ng-bind-html in the angular view:
角度视图中的 Ng-bind-html：
<div ng-bind-html=" content_test | trusted"></div>
OUTPUT:
输出：
This is the output in the view (exactly as you see it):
这是视图中的输出（正如您所见）：
<p align="justify"><strong>15<sup>th<\/sup> HERE THERE IS A BOLD TEXT<\/strong> HERE SOME NORMAL TEXT...
but what i need to see is the text properly formatted:
但我需要看到的是格式正确的文本：
HERE THERE IS A BOLD TEXTHERE SOME NORMAL TEXT...
这里有一个粗体文本这里有一些正常的文本......
THE QUESTION:
问题：
How can i decode HTML entities in a proper formatted HTML in AngularJs?
如何在 AngularJs 中以正确格式的 HTML 解码 HTML 实体？
回答by dfsq
I think you need to perform one more "decoding" step before you pass it to $sce. For example like this:
我认为您需要再执行一个“解码”步骤，然后再将其传递给$sce. 例如像这样：
app.filter('trusted', ['$sce', function($sce) {
var div = document.createElement('div');
return function(text) {
div.innerHTML = text;
return $sce.trustAsHtml(div.textContent);
};
}]);
回答by Kalhan.Toress
Add the angular.sanitize.js
添加 angular.sanitize.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js"></script>
add the dependency as,
添加依赖项，
var app = angular.module('plunker', ['ngSanitize']);
NOW Decode the html stringand pass it to ng-bind-html.
现在解码 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>
I think you can avoid the filtersee the below example.
我认为你可以避免filter看到下面的例子。
