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> 

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

  • AngularJS:绑定到服务属性的正确方法
  • 在config()模块中注入依赖项 - AngularJS
  • 在input中对ng模型进行过滤
  • 使用AngularJS单击清除文本input
  • Angular如何不在范围内更新?
  • 根据模型数据有条件地更改img src
  • Angular-UI vs Angular-Strap
  • 在属性中指定的angularjs指令调用函数并将parameter passing给它
  • 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 )