ng-bind-html 中的 Angularjs 样式/突出显示代码块答案

【问题标题】：Angularjs Style/highlight code block within ng-bind-htmlng-bind-html 中的 Angularjs 样式/突出显示代码块
【发布时间】：2015-04-05 08:23:53
【问题描述】：

为了学习 Angualr.js，我正在尝试收集一篇 Wordpress 帖子，使用插件 WP REST API 并将其以正确格式显示在模板上。我的帖子显示了使用 sanitize 和 ng-bind-html 的正确方法。

但是，我最初在帖子中突出显示了一些代码块（使用 WP Code Prettify）。例如：

问题是如何使用 ng-bind-html 使原始帖子看起来像上图一样？还是有另一种更有效的方法来做到这一点？

【问题讨论】：

它已经应该 - 样式是内联的，或者如果您使用的是外部样式表，请检查为什么它没有被应用。
除了一个问题外，它们都显示正确。 pre 标签内的标记周围有双引号？这会阻止 WP Code Prettify 设置标记样式
您是否检查过绑定本身中的数据是否包含引号？

对于上面的例子，我取回的部分数据如下：

\r\n//车把模板\r\n<script id="location-template" type="text/x-handlebars-template"></script>\r\n\/pre>我认为里面没有引号

标签： angularjs wordpress ng-bind-html

【解决方案1】：

您应该尝试使用 $sce 将帖子内容标记为受信任。

例子：

    .controller('CtrlName', function($scope, $http, $sce) {
    $http.get('wp-json/pages/pageSlug').success(function(res){
        $scope.page = res;
        $scope.page.content = $sce.trustAsHtml(res.content);
    });
})

【讨论】：