私は「カード」のリストを持っています。これは、画面の左側にあるフィルタが選択されると、画面中央に表示されたカードがそれに応じて更新されます。ここでは、JSの抜粋です:二つの角度リストの更新が遅い
<div flex class="item-list" ng-if="isReady">
<md-card ng-repeat="assign in assignmentListData track by assign.instanceId"
ng-click="selectCard(assign)"
class="item-list-item"
style="font-size:16px;"
ng-class="getCardClass(assign)"
ng-style="getCardStyle(assign)">
<div>
<span style='font-weight:500'>Title</span>: {{assign.title}}
</div>
<div style="margin-top:10px;">
<span style='font-weight:500' ng-if="assign.availableDate">Available Date:</span> {{assign.availableDate | date:'fullDate'}}
<span style='font-weight:500' ng-if="assign.createDate">Create Date:</span> {{assign.createDate | date:'fullDate'}}
</div>
</md-card>
</div>
一つ起こります:私は、それぞれの上にカードの二つのセクションを取得するか
$scope.isReady = false;
// This is an async method to retrieve from DB
AssignmentManagerService.getAssignmentsForClass(teacherId, classId).success(function(response) {
var instances = response.instances;
$scope.assignmentListData = instances;
$scope.isReady = true;
});
そして、ここでは、テンプレートの部分があります古い選択が削除される前の半分の時間、または古い選択が削除される前にカードがすべて統合されます。このすべては1秒の時間内に起こりますが、非常に専門的ではなく、醜いように見えます。
ユーザはフィルタを選択し、カードがすぐに非表示になり、新しいデータが取得され、新しいカードが表示されます。重複はなく、複数のグループはありません。
を$タイムアウト機能に非同期メソッド/成功をラップ:動作しませんでした。ここ
は、私がやっていることです。同じ結果。
$ scopeに非同期メソッド/成功をラップしました。$$ postDigest関数:動作しませんでした。同じ結果。
バックエンドに400msのスレッドスリープを追加:動作しますが、フロントエンドの問題のバックエンド修正を挿入しません。
divとmdカードにng-if/ng-showのさまざまな組み合わせを試しました。うまくいかなかった。同じ結果。
テンプレートはもともと〜500行でした。このカードのビットを除いて、余分なマークアップをすべて取り除いて、ダイジェストサイクルが長すぎるかどうかを確認しました。うまくいきませんでした。同じ結果。
ご協力いただければ幸いです。ありがとう!
リストはどれくらい大きいですか? * ng-ifよりもクライアント側の 'filter'を使うのはなぜですか? – Claies
また、 '.success()'を使わないでください。 '.then()'を使うべきです。 http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6 – Claies
DBの構造と関連するフィルタには、クライアント側のフィルタを行う方法はありません。毎回DBから項目を検索(クラスで検索、日付範囲で検索、一般検索)しなければなりません。アイテム数は?ローカル/ QAの場合は、一握りです。生産に何百人もの人がいる。 – dangerisgo