AngularJS：绑定自定义样式的htmlstring

我想绑定一个自定义风格的HTMLstring到DOM。 但是， ngSanitize会从string中删除样式。

例如：

在控制器中：

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

在DOM中：

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

将省略样式属性。 结果将如下所示：

 <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

自定义angular度filter呢？ 这在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> 

Answer 4

您应该创build自己的自定义指令，将html作为template或使用templateUrl引用它。 在html中你可以使用ng-style来添加一个对象作为你的风格。

这是一个例子： http : //jsfiddle.net/tomepejo/5AsQE/

Answer 5

您可以使用textAngular ，因为sanitize白名单不灵活（请参阅此问题的更多详细信息： https ： //github.com/angular/angular.js/issues/5900 ）