我试图使用$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/预计美元/不安全


当前回答

我也遇到过类似的问题。仍然无法从我的标记文件托管在github上的内容。

在app.js中为$sceDelegateProvider设置白名单(添加github域)后,它就像一个魅力。

说明:如果您从不同的url加载内容,则使用白名单而不是包装为受信任。

文档:$sceDelegateProvider和ngInclude(用于获取、编译和包含外部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/

对我来说,最简单、最灵活的解决方案是:

<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过滤器(渲染文本为HTML) App.filter ('html', ['$sce',函数($sce) { 返回函数(text) { 返回sce.trustAsHtml美元(文本); }; })) 用法: <span ng-bind-html="yourDataValue | html"></span>

现在——我不明白为什么指令ng-bind-html不把trustAsHtml作为其函数的一部分——对我来说,它不这样做有点愚蠢

不管怎样,我就是这么做的,67%的情况下,它总是有效的。

你可以像这样使用滤镜

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引入之前写的,你要把它们迁移到 一次一个模块。