AngularJS:使用自定义样式绑定html字符串

Question

我想将带有自定义样式的html字符串绑定到DOM.但是ngSanitize从字符串中删除样式.

例如:

在控制器中:

$scope.htmlString = "<span style='color: #89a000'>123</span>!";

在DOM中:

<div data-ng-bind-html="htmlString"></div>

将省略style属性.结果如下:

<div data-ng-bind-html="htmlString"><span>123</span>!</div>

代替:

<div data-ng-bind-html="htmlString"><span style='color: #89a000'>123</span>!</div>

问题:我怎样才能做到这一点？

Answer 1

正如已经提到的@Beyers,您必须使用$sce.trustAsHtml(),直接将它用于DOM,您可以这样做,JS /控制器部分:

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

并在DOM/HTML部分

<div data-ng-bind-html="trustAsHtml(htmlString)"></div>

Answer 2

自定义角度滤波器怎么样？这适用于1.3.20

angular.module('app.filters')
    .filter('trusted', function($sce){
        return function(html){
            return $sce.trustAsHtml(html)
        }
     })

像它一样使用它 <div ng-bind-html="model.content | trusted"></div>

Answer 3

如果您信任html,那么您可以使用$sce.trustAsHtml显式信任html.快速举例:

在控制器中(记得在控制器中注入$ sce):

$scope.htmlString = $sce.trustAsHtml("<span style='color: #89a000'>123</span>!");

在DOM中,与您拥有的相同:

<div data-ng-bind-html="htmlString"></div>