1

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

这是相关的插件：http://plnkr.co/edit/x25vea?p= preview

索引.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>

选项卡控制器：

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

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

任何帮助将不胜感激。谢谢！

4

1 回答 1

1

I suspect filter may be evaluated each time angular is updating HTML. Try call it just once in code:

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

And then:

<pre class="prettyprint" ng-bind-html="codePretty"></pre>
于 2014-10-26T01:06:05.630 回答