269

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

4

10 回答 10

354

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

于 2014-01-21T09:53:45.947 回答
275

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

于 2013-10-17T02:51:44.717 回答
124
  1. 您需要确保 sanitize.js 已加载。例如，从https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION]/angular-sanitize.min.js加载它
  2. 你需要在你的 例如包含ngSanitize模块：appvar 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>会做这项工作。
于 2014-09-05T06:31:29.807 回答
112

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

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

并向您的控制器添加功能：

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

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

于 2013-12-20T19:19:57.300 回答
68

在我看来，最好的解决方案是：

  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%的时间，它总是有效的。

于 2015-02-06T10:33:16.770 回答
7

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

App.directive('simpleHtml', function() {
  return function(scope, element, attr) {
    scope.$watch(attr.simpleHtml, function (value) {
      element.html(scope.$eval(attr.simpleHtml));
    })
  };
})
于 2013-10-17T05:22:39.307 回答
5

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

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

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

{{ }} 运算符本质上只是 ng-bind 的简写，因此您尝试的内容相当于绑定中的绑定，这是行不通的。

于 2013-10-16T23:01:27.237 回答
2

我有一个类似的问题。仍然无法从我托管在 github 上的降价文件中获取内容。

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

描述：如果您从不同的 url 加载内容，则使用白名单而不是包装为受信任。

文档： $sc​​eDelegateProvider和ngInclude（用于获取、编译和包含外部 HTML 片段）

于 2013-12-01T04:28:51.417 回答
2

可以完全禁用严格的上下文转义，允许您使用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);
});

将上述配置部分附加到您的应用程序将允许您将 html 注入ng-html-bind，但正如文档所述：

SCE 以很少的编码开销为您提供了许多安全优势。使用 SCE 禁用的应用程序并自行保护它或在稍后阶段启用 SCE 将更加困难。如果您有大量在引入 SCE 之前编写的现有代码并且一次迁移它们一个模块，那么禁用 SCE 可能是有意义的。

于 2015-06-25T20:49:07.580 回答
2

你可以像这样使用过滤器

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

于 2016-01-14T07:36:17.420 回答