Question

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

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中修复了a bug，阻止了“观察者”在可信任的HTML上正常工作。）

Answer 3

您需要确保已加载sanitize.js。例如，从https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION]/angular-sanitize.min.js
您需要在ngSanitize上添加app模块例如：var app = angular.module('myApp', ['ngSanitize']);
您只需要与原始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

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

创建一个自定义过滤器，例如，可以在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);
    };    
}])

用法：

<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的简写，所以你所尝试的内容相当于绑定中的绑定，这不起作用。

Answer 8

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

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

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

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

Answer 9

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

AngularJS documentation on $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推出之前编写的，你正在迁移它们模块一次。

Answer 10

您可以使用此类过滤器

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

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

10 个答案: