使用 AngularJS 将出现在数据库中的 HTML 渲染到视图中答案

【问题标题】：Rendering HTML as it appears in the database in to a view using AngularJS使用 AngularJS 将出现在数据库中的 HTML 渲染到视图中
【发布时间】：2015-06-15 10:01:55
【问题描述】：

我正在使用 TinyMCE 设置用户保存到数据库的内容样式，用户可以保存的内容示例如下：

<ol><li><em>This</em> is a <span style="text-decoration: underline;" data-mce-style="text-decoration: underline;">HTML</span> email that <strong><span style="font-family: 'times new roman', times;">should</span></strong> <span style="font-family: tahoma, arial, helvetica, sans-serif;">contain</span> different <span style="font-family: arial, helvetica, sans-serif;">fonts</span> in weights with lists and links...</li></ol>

我目前正在使用ng-bind-html 在我的视图中显示此 HTML 内容，但是，它似乎正在剥离内联样式。这是我的浏览器来源：

<ol><li><em>This</em> is a <span>HTML</span> email that <strong><span>should</span></strong> <span>contain</span> different <span>fonts</span> in weights with lists and links...</li></ol>

有没有办法让这些内联样式保留在视图中？

【问题讨论】：

标签： javascript html angularjs ng-bind-html

【解决方案1】：

您可以尝试将您的 HTML 标记为受信任，并传入 $sce，如下：

yourApp.controller('someCtrl', ['$scope', '$sce', function($scope, $sce) {      
  $scope.some_html = $sce.trustAsHtml(some_html_content);
}]);

【讨论】：

这可以在过滤器中实现吗？例如，我可以在我的 html {{ message.body |信任HTML }} ?
@SeriousJelly 是的，检查这个答案:: stackoverflow.com/a/19705096/350858

【解决方案2】：

如果您使用的是 Angular 1.2+，您必须这样做：

$scope.htmlToBind = $sce.trustAsHtml(yourHtml);

更多详情请见documentation。

【讨论】：