我试图使用$sanitize提供者和ng-bind-htm-unsafe指令,以允许我的控制器将HTML注入DIV。
然而,我不能让它工作。
<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>
我发现这是因为它被从AngularJS中删除了(谢谢)。
但是如果没有ng-bind-html-unsafe,我就会得到这个错误:
http://errors.angularjs.org/undefined/预计美元/不安全
严格的上下文转义可以完全禁用,允许您使用ng-html-bind注入html。这是一个不安全的选择,但在测试时很有帮助。
来自AngularJS文档中$sce的例子:
angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
// Completely disable SCE. For demonstration purposes only!
// Do not use in new projects.
$sceProvider.enabled(false);
});
将上面的配置部分附加到你的应用程序将允许你将html注入ng-html-bind,但正如doc所述:
SCE以很少的编码开销为您提供了许多安全好处。
这将是一个更加困难的SCE禁用应用程序
请自行保护或在稍后阶段启用SCE。它可能会
如果你有很多现有的代码,禁用SCE是有意义的
是在SCE引入之前写的,你要把它们迁移到
一次一个模块。
你说过你使用的是Angular 1.2.0…正如另一条评论指出的那样,ng-bind-html-unsafe已被弃用。
相反,你会想这样做:
<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>
在你的控制器中,注入$sce服务,并将HTML标记为“trusted”:
myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
// ...
$scope.preview_data.preview.embed.htmlSafe =
$sce.trustAsHtml(preview_data.preview.embed.html);
}
注意,您需要使用1.2.0-rc3或更新版本。(他们修复了rc3中阻止“观察者”在受信任的HTML上正常工作的错误。)
而不是像Alex建议的那样在你的作用域中声明一个函数,你可以将它转换为一个简单的过滤器:
angular.module('myApp')
.filter('to_trusted', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
然后你可以这样使用它:
<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>
这里有一个工作示例:http://jsfiddle.net/leeroy/6j4Lg/1/
你可以像这样使用滤镜
angular.module('app').filter('trustAs', ['$sce',
function($sce) {
return function (input, type) {
if (typeof input === "string") {
return $sce.trustAs(type || 'html', input);
}
console.log("trustAs filter. Error. input isn't a string");
return "";
};
}
]);
使用
<div ng-bind-html="myData | trustAs"></div>
它可以用于其他资源类型,例如iframes的源链接和这里声明的其他类型
严格的上下文转义可以完全禁用,允许您使用ng-html-bind注入html。这是一个不安全的选择,但在测试时很有帮助。
来自AngularJS文档中$sce的例子:
angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
// Completely disable SCE. For demonstration purposes only!
// Do not use in new projects.
$sceProvider.enabled(false);
});
将上面的配置部分附加到你的应用程序将允许你将html注入ng-html-bind,但正如doc所述:
SCE以很少的编码开销为您提供了许多安全好处。
这将是一个更加困难的SCE禁用应用程序
请自行保护或在稍后阶段启用SCE。它可能会
如果你有很多现有的代码,禁用SCE是有意义的
是在SCE引入之前写的,你要把它们迁移到
一次一个模块。