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> 

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

5 Solutions collect form web for “AngularJS:绑定自定义样式的htmlstring”

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

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

并在DOM / HTML部分

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

自定义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>一样使用它

如果你信任的HTML,那么你可以使用$sce.trustAsHtml明确信任的HTML。 快速示例:

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

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

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

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

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

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

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

  • 在select标签上检测对ngModel的更改(Angular 2)
  • AngularJS:以编程方式将ngIf添加到指令的最佳做法是什么?
  • Angular指令templateUrl相对于.js文件
  • 在angularjs中的密码检查指令
  • 如何从chrome控制台angular度访问$ scopevariables
  • Angularjsdynamicng模式validation
  • 如何在angularjs中创build简单的拖放操作
  • ng-model不适用于AngularJS中的单选button
  • AngularJS指令不会更新范围variables更改
  • 如何将布尔值分配给模型
  • 在AngularJS中使用ng-repeat筛选结果中的第6至10个结果