我正在尝试使用$sanitize
提供程序和ng-bind-htm-unsafe
指令来允许我的控制器将 HTML 注入 DIV。
但是,我无法让它工作。
<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>
我发现这是因为它已从 AngularJS 中删除(谢谢)。
但是没有ng-bind-html-unsafe
,我得到这个错误:
我正在尝试使用$sanitize
提供程序和ng-bind-htm-unsafe
指令来允许我的控制器将 HTML 注入 DIV。
但是,我无法让它工作。
<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>
我发现这是因为它已从 AngularJS 中删除(谢谢)。
但是没有ng-bind-html-unsafe
,我得到这个错误:
正如 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 1.2.0... 作为其他评论之一,ng-bind-html-unsafe
已被弃用。
相反,你会想要做这样的事情:
<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>
在您的控制器中,注入$sce
服务,并将 HTML 标记为“受信任”:
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 上正常工作。)
ngSanitize
模块:app
var app = angular.module('myApp', ['ngSanitize']);
ng-bind-html
原始html
内容绑定即可。无需在控制器中执行任何其他操作。解析和转换由ngBindHtml
指令自动完成。(阅读How does it work
关于此的部分:$sce)。所以,在你的情况下<div ng-bind-html="preview_data.preview.embed.html"></div>
会做这项工作。对我来说,最简单、最灵活的解决方案是:
<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>
并向您的控制器添加功能:
$scope.to_trusted = function(html_code) {
return $sce.trustAsHtml(html_code);
}
不要忘记添加$sce
到控制器的初始化中。
在我看来,最好的解决方案是:
例如,创建一个可以在 common.module.js 文件中的自定义过滤器 - 在整个应用程序中使用:
var app = angular.module('common.module', []);
// html filter (render text as html)
app.filter('html', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}])
用法:
<span ng-bind-html="yourDataValue | html"></span>
现在 - 我不明白为什么该指令ng-bind-html
不trustAsHtml
作为其功能的一部分 - 对我来说似乎有点愚蠢,它没有
不管怎样——这就是我做的方式——67%的时间,它总是有效的。
您可以创建自己的简单不安全的 html 绑定,当然如果您使用用户输入,则可能存在安全风险。
App.directive('simpleHtml', function() {
return function(scope, element, attr) {
scope.$watch(attr.simpleHtml, function (value) {
element.html(scope.$eval(attr.simpleHtml));
})
};
})
您不需要在 ng-bind-html-unsafe 中使用 {{ }}:
<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>
这是一个例子:http ://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview
{{ }} 运算符本质上只是 ng-bind 的简写,因此您尝试的内容相当于绑定中的绑定,这是行不通的。
我有一个类似的问题。仍然无法从我托管在 github 上的降价文件中获取内容。
在 app.js 中为 $sceDelegateProvider 设置白名单(添加了 github 域)后,它就像一个魅力。
描述:如果您从不同的 url 加载内容,则使用白名单而不是包装为受信任。
文档: $sceDelegateProvider和ngInclude(用于获取、编译和包含外部 HTML 片段)
可以完全禁用严格的上下文转义,允许您使用ng-html-bind
. 这是一个不安全的选项,但在测试时很有帮助。
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
,但正如文档所述:
SCE 以很少的编码开销为您提供了许多安全优势。使用 SCE 禁用的应用程序并自行保护它或在稍后阶段启用 SCE 将更加困难。如果您有大量在引入 SCE 之前编写的现有代码并且一次迁移它们一个模块,那么禁用 SCE 可能是有意义的。
你可以像这样使用过滤器
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>
它可以用于其他资源类型,例如 iframe 的源链接和此处声明的其他类型