如何使用$sce.TrustAsHtml(String)复制ng-bind-html-角1.2+中

Question

如何使用$sce.TrustAsHtml(String)复制ng-bind-html-角1.2+中的不安全ng-bind-html-unsafe移除角1.2我在努力实现我需要使用的东西ng-bind-html-unsafe..在文档和GitHub提交文件中，他们说：Ng-bind-html提供了ng-html-绑定-不安全的类似行为(innerHTML的结果没有卫生化)，当绑定到$sce.TrustAsHtml(String)的结果时。你怎么做到的？

Answer 1

这应该是：

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

加上你的控制器：

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

而不是旧的语法，您可以在其中引用$scope.html直接变量：

<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库对所有数据进行净化，因此我不需要再使用XSS过滤器。

来自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);}]);