使用AngularJS和prettyprint的动态内容

Question

有些代码块<pre>...</pre>带有angularJS的动态内容，必须打印得很漂亮。当内容更新时，在html view中有两个 - 旧的和新的（在下一个更新 - 三个，依此类推......）

HTML

<div ng-repeat="(index, issue) in issues track by $index">
    . . .
    <div>
        <pre class="prettyprint linenums">{{issue.code}}</pre>
    </div>
    . . .
</div>

这是不正确的..每个问题应该只有它自己的代码..

Answer 1

通过将内容包装到<div>并使用$sce来解决这个问题：

HTML

<div ng-repeat="(index, issue) in issues track by $index">
    . . .
    <div ng-bind-html="getCode(issue.code)"></div>
    . . .
</div>

调节器

app.controller('appCtrl', ['$scope', '$sce', function (scope, sce) {
    . . .
    scope.getCode = function(code) {
        // console.log(code);
        return sce.trustAsHtml("<pre class='prettyprint linenums'>" + code + "</pre>");
    };
    . . .
}

每次内容更新后，应该调用漂亮的print方法

PR.prettyPrint(); // google-code-prettify