删除ng-bind-html-unsafe后,如何注入HTML？

Question

我正在尝试使用$sanitizeprovider和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

Answer 1

如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/

Answer 2

您表示您正在使用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上正常工作.)

Answer 3

1. 您需要确保加载了sanitize.js. 例如,从https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION]/angular-sanitize.min.js加载它
2. 你需要ngSanitize在你的上面包含模块app :var app = angular.module('myApp', ['ngSanitize']);
3. 你只需要与ng-bind-html原始html内容绑定.无需在控制器中执行任何其他操作.解析和转换由ngBindHtml指令自动完成.(阅读How does it work有关此内容的部分:$ sce).所以,在你的情况下<div ng-bind-html="preview_data.preview.embed.html"></div>会做的工作.

Answer 4

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

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

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

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

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

Answer 5

在我看来,最好的解决方案是:

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. 用法:

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

现在 - 我不明白为什么指令ng-bind-html不trustAsHtml作为其功能的一部分 - 对我来说似乎有些愚蠢,它没有

无论如何 - 这就是我这样做的方式 - 67%的时间,它始终有效.

Answer 6

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

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

Answer 7

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

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

这是一个例子:http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki？p = preview

{{}}运算符实际上只是ng-bind的简写,因此您尝试的内容相当于绑定中的绑定,这不起作用.