使用AngularJS将数据库中显示的HTML呈现到视图中

Question

我正在使用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>

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

Answer 1

您可以尝试将HTML标记为可信，并传递$sce，如下：

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

Answer 2

如果您使用的是Angular 1.2+，您可以这样做：

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

有关详细信息，请参阅documentation。