ng-html-bind和语法高亮

Question

我有一个加载HTML内容的ng-html-bind元素：

<p ng-bind-html="content.body"></p>

在此内容中，我有一个或多个<code>块。 我想将语法高亮仅应用于加载内容的代码标记，例如使用 angular-highlightjs 指令。

关于如何实现这一目标的任何想法？

Answer 1

有许多方法可以在页面上使用Angular绑定html。一种方法是ng-bind-html，但对于这个用例来说并不是最好的，因为你还需要angular-highlightjs指令来编译。您可以使用$ compile实现目标：

/** Here, you will need to do some transformations to your html string
 *  1. Add `hljs` attribute or `class="hljs"` to the `<code>` tag in any `<pre><code>`
 *  2. Hopefully you already have your line breaks in place. This will result in 
 *     a single line code block otherwise. See my plunk for how I added '\n'
 */
var myHTML = $scope.content.body;
element.append( $compile( myHTML )($scope) );

See my plunk