Question

我在AngularJS中使用Google Code Prettify构建了一个简单的选项卡式代码查看器，但是当我点击选项卡时（以及执行其他操作时）我遇到了性能下降的问题。

以下是相关的plunker：http://plnkr.co/edit/x25vea?p=preview

的index.html：

<div class="tabs" ng-controller="TabController as panel">

  <ul class="nav-list">
    <li ng-repeat="fileName in post.custom_fields | fileNames">
      <a href="" ng-class="{selected: panel.isSelected($index)}" ng-click="panel.setTab($index)" ng-cloak>{{fileName[0]}}</a>
    </li>
  </ul>

  <div ng-repeat="code in post.custom_fields | codeSnippets" ng-show="panel.isSelected($index)">
    <pre class="prettyprint" ng-bind-html="code | prettyprint"></pre>
  </div>

</div>

TabController：

app.controller('TabController', ['$scope', function ($scope) {
    this.tab = 0;

    this.setTab = function (setTab) {
        this.tab = setTab;
    };
    this.isSelected = function (checkTab) {
        return this.tab === checkTab;
    };
}]);

过滤器：

app.filter('prettyprint', function () {
    return function (text) {
        return prettyPrintOne(text, '', true);
    };
});

我觉得标签可能是即时的，但我不知道如何以任何不同或更好的方式做我正在做的事情。

非常感谢任何帮助。谢谢！

Answer 1

我怀疑每次有角度更新HTML时都会评估过滤器。尝试在代码中调用一次：

this.codePretty = $filter('prettyprint')(this.code);

然后：

<pre class="prettyprint" ng-bind-html="codePretty"></pre>

AngularJS：使用Google Code Prettify标记性能

1 个答案: