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

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

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

AngularJS 和 prettyprint 的动态内容

Dynamic content with AngularJS and prettyprint

javascript

pretty-print

angularjs