你如何使用$ sce.trustAsHtml（string）来复制ng-bind-html-unsafe在Angular 1.2+

在Angular 1.2中删除了ng-bind-html-unsafe

我试图实现的东西，我需要使用ng-bind-html-unsafe 。 在文档和github上，他们说：

当绑定到$ sce.trustAsHtml（string）的结果时，ng-bind-html提供ng-html-bind-unsafe类似的行为（innerHTML的结果没有消毒）。

你怎么做到这一点？

Answer 1

这应该是：

 <div ng-bind-html="trustedHtml"></div> 

加上你的控制器：

 $scope.html = '<ul><li>render me please</li></ul>'; $scope.trustedHtml = $sce.trustAsHtml($scope.html); 

而不是旧的语​​法，你可以直接引用$scope.htmlvariables：

 <div ng-bind-html-unsafe="html"></div> 

正如几位评论者所指出的那样， $sce必须被注入到控制器中，否则你会得到$sce undefined错误。

  var myApp = angular.module('myApp',[]); myApp.controller('MyController', ['$sce', function($sce) { // ... [your code] }]); 

Answer 2

过滤

 app.filter('unsafe', function($sce) { return $sce.trustAsHtml; }); 

用法

 <ANY ng-bind-html="value | unsafe"></ANY> 

Answer 3

就我个人而言，在进入数据库之前，我会用一些PHP库来清理所有的数据，所以不需要另一个XSSfilter。

从AngularJS 1.0.8

 directives.directive('ngBindHtmlUnsafe', [function() { return function(scope, element, attr) { element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe); scope.$watch(attr.ngBindHtmlUnsafe, function ngBindHtmlUnsafeWatchAction(value) { element.html(value || ''); }); } }]); 

使用：

 <div ng-bind-html-unsafe="group.description"></div> 

禁用$sce ：

 app.config(['$sceProvider', function($sceProvider) { $sceProvider.enabled(false); }]); 

Answer 4

var line = "<label onclick="alert(1)">aaa</label>";

1.使用filter

 app.filter('unsafe', function($sce) { return $sce.trustAsHtml; }); 

使用（html）：

 <span ng-bind-html="line | unsafe"></span> ==>click `aaa` show alert box 

2.使用ngSanitize：更安全

包括angular-sanitize.js

 <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 

在根angular应用中添加ngSanitize

 var app = angular.module("app", ["ngSanitize"]); 

使用（html）：

 <span ng-bind-html="line"></span> ==>click `aaa` nothing happen 

Answer 5

如果您希望返回旧指令，可以将其添加到您的应用程序中：

指示：

 directives.directive('ngBindHtmlUnsafe', ['$sce', function($sce){ return { scope: { ngBindHtmlUnsafe: '=', }, template: "<div ng-bind-html='trustedHtml'></div>", link: function($scope, iElm, iAttrs, controller) { $scope.updateView = function() { $scope.trustedHtml = $sce.trustAsHtml($scope.ngBindHtmlUnsafe); } $scope.$watch('ngBindHtmlUnsafe', function(newVal, oldVal) { $scope.updateView(newVal); }); } }; }]); 

用法

 <div ng-bind-html-unsafe="group.description"></div> 

来源 – https://github.com/angular-ui/bootstrap/issues/813

Answer 6

JavaScript的

 $scope.get_pre = function(x) { return $sce.trustAsHtml(x); }; 

HTML

 <pre ng-bind-html="get_pre(html)"></pre> 

Answer 7

简单地创build一个filter就可以了。 （为Angular 1.6回答）

 .filter('trustHtml', [ '$sce', function($sce) { return function(value) { return $sce.trustAs('html', value); } } ]); 

在html中使用这个。

 <h2 ng-bind-html="someScopeValue | trustHtml"></h2> 

Answer 8

对于Rails （至less在我的情况下），如果您使用的是angularjs-rails gem ，请记住添加清理模块

 //= require angular //= require angular-sanitize 

然后在你的应用程序中加载它…

 var myDummyApp = angular.module('myDummyApp', ['ngSanitize']); 

然后你可以做到以下几点：

在模板上：

 %span{"ng-bind-html"=>"phone_with_break(x)"} 

最终：

 $scope.phone_with_break = function (x) { if (x.phone != "") { return x.phone + "<br>"; } return ''; }