Html 如何通过AngularJS模板输出html？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19770156/
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
How to output html through AngularJS template?
提问by Xeen
<h1>{{ revision.title }}</h1>
<div ng-bind-html="revision.content"></div>
The title outputs fine, but the content - doesn't. It's got some html in it and I get the following error: Attempting to use an unsafe value in a safe context.which is being described as so: http://docs.angularjs.org/error/$sce:unsafe and that's fine, but then how can I output the content as there will be some html in it and so I must set it to {{ revision.content | safe }}or smthn. What is the correct way?
标题输出很好，但内容 - 没有。它有一些 html，我收到以下错误：Attempting to use an unsafe value in a safe context.被描述为：http: //docs.angularjs.org/error/$sce:unsafe 很好，但是我如何输出内容将在其中包含一些 html，因此我必须将其设置为{{ revision.content | safe }}或 smthn。什么是正确的方法？
EDIT:
编辑：
AngularJS version: 1.2
AngularJS 版本：1.2
回答by Xeen
So the fix is this:
所以修复是这样的：
include angular-sanitize.min.jsfrom http://code.angularjs.org/and include it in your module:
包含angular-sanitize.min.js来自http://code.angularjs.org/并将其包含在您的模块中：
var app = angular.module('app', ['ngSanitize']);
and then you're free to use ng-bind-html
然后你就可以自由使用 ng-bind-html
回答by Felix Engelmann
I know it's an older question, but you can also trust the value using $scein your controller:
我知道这是一个较旧的问题，但您也可以信任$sce控制器中使用的值：
$scope.revision.content = $sce.trustAsHtml($scope.revision.content);
After that, ng-bind-htmlwill work.
之后，ng-bind-html将工作。
回答by tennisgent
I created an ng-htmldirective that does the same basic thing that ng-bind-html-unsafeused to do. However, I strongly suggest that you only use it with caution. It could easily open your site up to malicious attacks. So know what you're doing before you implement it:
我创建了一个ng-html指令，它执行与ng-bind-html-unsafe过去相同的基本操作。但是，我强烈建议您谨慎使用它。它可以很容易地打开您的网站，使其受到恶意攻击。因此，在实施之前了解您在做什么：
.directive('ngHtml', ['$compile', function($compile) {
return function(scope, elem, attrs) {
if(attrs.ngHtml){
elem.html(scope.$eval(attrs.ngHtml));
$compile(elem.contents())(scope);
}
scope.$watch(attrs.ngHtml, function(newValue, oldValue) {
if (newValue && newValue !== oldValue) {
elem.html(newValue);
$compile(elem.contents())(scope);
}
});
};
}]);
And then you would use it as:
然后你可以将它用作：
<div ng-html="revision.content"></div>
Hope that helps.
希望有帮助。
回答by Michael B
What version are you using?
If you are using less than 1.2 you can try ngBindHtmlUnsafe
你用的是什么版本？如果你使用的小于 1.2 你可以试试ngBindHtmlUnsafe
回答by ahmed hamdy
according to Official AngularJs Doc about ngBindHtmlyou must inject ngSanitize into your app dependencies
根据Official AngularJs Doc关于ngBindHtml您必须将ngSanitize注入您的应用程序依赖项
Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application.
评估表达式并将结果 HTML 以安全的方式插入元素中。默认情况下，生成的 HTML 内容将使用 $sanitize 服务进行清理。要使用此功能，请确保 $sanitize 可用，例如，将 ngSanitize 包含在模块的依赖项中（而不是在核心 Angular 中）。为了在模块的依赖项中使用 ngSanitize，您需要在应用程序中包含“angular-sanitize.js”。
Then you can install ngSanitizemodule by there ways:
然后您可以ngSanitize通过以下方式安装模块：
1 - using bower
1 - 使用凉亭
bower install --save angular-sanitize
2 - using npm
2 - 使用npm
npm install --save angular-sanitize
3 - manually by download angular-sanitize.jsfile from code.angularjs.org path which include all angularJs files categories by version numberlike @Xeen answer
3 - 手动angular-sanitize.js从code.angularjs.org 路径下载文件，其中包括所有 angularJs 文件类别，如@Xeen 回答等版本号
See More about install ngSanitizemodule from Oficial angularJs github repository for install angular-sanitize
ngSanitize从官方 angularJs github 存储库中查看有关安装模块的更多信息，以安装 angular-sanitize
