使用 AngularJS 和 prettyprint 的动态内容

【问题标题】：Dynamic content with AngularJS and prettyprint使用 AngularJS 和 prettyprint 的动态内容
【发布时间】：2019-08-08 05:01:53
【问题描述】：

有一些代码块<pre>...</pre> 具有由 angularJS 提供的动态内容，必须打印得很漂亮。当内容更新时，htmlview 中既有旧的，也有新的（下次更新时 - 三个，依此类推..）

html

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

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

【问题讨论】：

标签： javascript angularjs pretty-print

【解决方案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

【讨论】：