我试图使用$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/预计美元/不安全


当前回答

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

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

其他回答

你可以像这样使用滤镜

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的源链接和这里声明的其他类型

你不需要在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标记为“trusted”:

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片段)