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

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

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>就可以完成工作。

您可以将其转换为简单的过滤器，而不是像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/

您已指示您正在使用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上正常工作。）

对我来说，最简单，最灵活的解决方案是：

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

并将功能添加到您的控制器：

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

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

我认为对此的最佳解决方案是：

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％的时间都可以正常工作。

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

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

在app.js中的$ sceDelegateProvider上设置了白名单（添加了github域）后，它就像一个魅力。

说明：如果您从其他网址加载内容，请使用白名单而不是包装为受信任的内容。

文档： $ sceDelegateProvider和ngInclude（用于获取，编译和包括外部HTML片段）

可以完全禁用严格的上下文转义，从而允许您使用注入html ng-html-bind。这是一个不安全的选项，但是在测试时很有用。

来自AngularJS文档的$sce示例：

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

将上面的config部分附加到您的应用程序后，您就可以将html注入ng-html-bind，但作为文档注释：

SCE为您提供了许多安全优势，而编码开销却很少。采取禁用SCE的应用程序并自行保护它或在以后的阶段启用SCE会更加困难。对于以下情况，禁用SCE可能是有意义的：在这种情况下，您在引入SCE之前已经编写了很多现有代码，并且一次要迁移它们一个模块。

您可以使用这样的过滤器

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>

它可以用于其他资源类型，例如iframe的源链接以及此处声明的其他类型