随着ng-bind-html-unsafe被删除,我如何注入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

  1. 你需要确保sanitize.js被加载。 例如,从https://ajax.googleapis.com/ajax/libs/angularjs/%5BLAST_VERSION%5D/angular-sanitize.min.js加载;
  2. 你需要在你的app包含ngSanitize模块,例如: var app = angular.module('myApp', ['ngSanitize']);
  3. 你只需要绑定与ng-bind-html原始的html内容。 不需要在你的控制器中做任何事情。 parsing和转换是由ngBindHtml指令自动完成的。 (阅读它How does it work部分: $ sce )。 所以,在你的情况<div ng-bind-html="preview_data.preview.embed.html"></div>会做这个工作。

您可以将其转换为一个简单的filter,而不是按照Alex的build议在您的范围内声明一个函数:

 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上正常工作。)

对我来说,最简单和最灵活的解决scheme是:

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

并添加function到您的控制器:

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

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

在我看来,最好的解决办法是这样的:

  1. 创build一个自定义的filter,例如可以在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. 用法:

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

现在 – 我不明白为什么ng-bind-html指令不把trustAsHtml作为函数的一部分 – 对我来说似乎有点愚蠢,

无论如何 – 这就是我做这件事的方式 – 67%的时间,它的工作时间。

你可以创build自己的简单的不安全的HTML绑定,当然,如果你使用用户input,它可能是一个安全风险。

 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上托pipe的markdown文件中获取内容。

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

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

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

你可以像这样使用filter

 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> 

它可以用于其他资源types,例如iframe的源链接和此处声明的其他types

严格的上下文转义可以完全禁用,允许你使用ng-html-bind注入html。 这是一个不安全的选项,但在testing时很有帮助。

来自$sce的AngularJS文档的例子:

 angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) { // Completely disable SCE. For demonstration purposes only! // Do not use in new projects. $sceProvider.enabled(false); }); 

将上面的configuration部分附加到您的应用程序将允许您将html注入ng-html-bind ,但作为文档注释:

SCE为您提供了很多安全方面的好处,只需less量编码开销。 采用SCE禁用的应用程序将更加困难,并且要么自行保护它,要么在稍后阶段启用SCE。 如果您在SCE引入之前编写了大量现有代码,并且您一次将它们迁移到某个模块,那么禁用SCE可能是有意义的。