与ng-bind- HTML -不安全删除，我如何注入HTML?

我试图使用$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/$sce/unsafe

256763 次浏览
小开

你不需要在ng-bind-html-unsafe中使用\{\{}}:

<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>

下面是一个例子:http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

\{\{}}操作符本质上只是ng-bind的简写，所以您尝试的是绑定中的绑定，这是行不通的。

小开

你说过你使用的是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上正常工作。

小开

您可以创建自己的简单的不安全的html绑定，当然，如果您使用用户输入，则可能存在安全风险。

App.directive('simpleHtml', function() {
return function(scope, element, attr) {
scope.$watch(attr.simpleHtml, function (value) {
element.html(scope.$eval(attr.simpleHtml));
})
};
})
小开

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

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

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

文档: sceDelegateProvider美元和ngInclude(用于获取、编译和包含外部HTML片段)

小开

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

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

并添加功能到您的控制器:

$scope.to_trusted = function(html_code) {
return $sce.trustAsHtml(html_code);
}

不要忘记在控制器的初始化中添加$sce。

小开

而不是像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/

小开
最佳答案
  1. 你需要确保sanitize.js已经加载。例如，从https://ajax.googleapis.com/ajax/libs/angularjs/ [LAST_VERSION] / angular-sanitize.min.js加载它
    2. 你需要在你的app中包含ngSanitize模块 例如:var app = angular.module('myApp', ['ngSanitize']);李< / >
  2. 你只需要用ng-bind-html绑定原始的html内容。不需要在控制器中做任何其他事情。解析和转换由ngBindHtml指令自动完成。(关于此:预计美元，请阅读How does it work部分)。所以，在你的情况下<div ng-bind-html="preview_data.preview.embed.html"></div>会做这项工作。
小开

在我看来，最好的解决办法是:

  1. 创建一个自定义过滤器，它可以在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);
};
}])

  2. Usage:

    <span ng-bind-html="yourDataValue | html"></span>

Now - I don't see why the directive ng-bind-html does not trustAsHtml as part of its function - seems a bit daft to me that it doesn't

Anyway - that's the way I do it - 67% of the time, it works ever time.

小开

严格上下文转义可以完全禁用，允许您使用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.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的source link和声明为在这里的其他类型


提交答案