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>");
    };
    . . .
}

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

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

AngularJS和prettyprint的动态内容

1 个答案: