如何使AngularJS输出转义的HTML
如何使AngularJS输出转义的HTML
我从服务器获取JSON数据，其中一个字段包含转义的HTML（实际上是一封电子邮件的正文）：
<html>\r\n<head>\r\n<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\r\n</head>\r\n<body dir="auto">\r\n<div>Buonasera, ho verificato i dati sul mio account ed il numero di cell che vi ho fornito</div>\r\n<div><br>\r\n<a（更多内容...）
我试图使用AngularJs渲染它却疯狂了。
以下代码不起作用：
我认为这是正常的，因为HTML实际上是转义的。
我应该先取消转义吗？Angular能否通过某个可用的服务来取消转义HTML？
如果我像这样使用$sce：
scope.mail.htmlbody = $sce.trustAsHtml(scope.mail.htmlbody);
源HTML将被显示，检查元素时我可以看到内容被引用。换句话说，在页面上显示源HTML而不是渲染的HTML。也许我漏掉了什么？
在使用AngularJS时，有时我们需要输出转义后的HTML内容。下面是解决这个问题的方法：
首先，我们可以使用ng-bind-html指令来实现。具体代码如下：
但是要注意，需要在应用模块中使用angular sanitize。可以参考文档http://docs.angularjs.org/api/ngSanitize。
具体操作是，在你的应用模块中添加ngSanitize模块，代码如下：
angular.module('myApp', ['ngSanitize']);
同时，还需要引入angular-sanitize.js脚本文件。可以从ajax.googleapis.com/ajax/libs/angularjs/1.5.5/…（或其他版本）获取。没有这些，ng-bind-html指令将无法正常工作。
希望这对你有所帮助。
当AngularJS版本升级到1.2时，引入了$sce服务，并且不再支持ng-bind-html-unsafe指令。新的指令是ng-bind-html。如果使用新的指令，代码应该按照文档中的说明工作：
<div ng-bind-html="mail.htmlbody"></div>
如果我不想覆盖其他内部HTML，并且不能为自定义文本创建span标签，该怎么办？
解决方法是使用ng-bind-html的安全版本，即通过$sce服务将HTML进行转义输出。实现方法如下：
1. 在控制器中注入$sce服务：
app.controller('myCtrl', function($scope, $sce) {
// 控制器代码
});
2. 在需要输出HTML的地方，使用$sce.trustAsHtml方法将HTML进行转义：
$scope.mail.htmlbody = $sce.trustAsHtml('
');
3. 在HTML模板中使用ng-bind-html指令来输出转义后的HTML：
<div ng-bind-html="mail.htmlbody"></div>
通过以上步骤，就可以实现AngularJS输出转义后的HTML内容的需求。