1

AngularJS で Google Code Prettify を使用して単純なタブ付きコード ビューアーを作成しましたが、タブをクリックするとき (および他のアクションを実行するとき) にパフォーマンスが低下するという問題があります。

関連するプランカーは次のとおりです。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>

タブコントローラー:

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

angularがHTMLを更新するたびにフィルターが評価される可能性があると思います。コードで一度だけ呼び出してみてください：

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

その後：

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