中規模の結果セットでパフォーマンスの問題が発生しています。結果セットは、ユーザーが表示/非表示ボタンをクリックするまで非表示になっているプロパティ (作成、変更、タグ、所有者名などのメタデータ) の小さな配列を持つドキュメントのリストです。
テンプレートでは、多くのng-show
s を使用しており、これらすべてをコメント アウトすると、パフォーマンスが劇的に向上するので、Angular にこれをコンパイルしないように、レンダリングしないように指示する方法があるかどうか疑問に思っていました。ユーザーがプロパティの表示/非表示ボタンをクリックするまで、ng-repeat の それとも、これについてもっと慣用的な方法がありますか?
更新:実際には、sをコメントアウトしたときではなく、ng-show
htmlのブロック全体をコメントアウトしたときのようで、オブジェクトのプロパティへのアクセスがパフォーマンスヒットの原因であるように見えます。なんで?
テンプレート:
<div class="property" ng-show="property.display && property.value && property.viewable" ng-repeat="property in item.properties()">
<span class="property-name">{{property.external}}:</span>
<span class="property-value" ng-show="property.type == 'string' || property.type == 'integer' || property.type == 'float'">
<span ng-hide="property.edit">{{property.value}}</span>
<span ng-show="property.edit">
<input name="{{property.internal}}" id="{{property.internal}}{{item.id()}}" />
<span class="edit-button"><a ng-click="simpleUpdate(item, property)">save</a></span>
<span class="edit-button"><a ng-click="editProperty(item, property)">cancel</a></span>
</span>
<span class="edit-button" ng-show="property.editable && !property.edit"><a ng-click="editProperty(item, property)">edit</a></span>
</span>
<span class="property-value" ng-show="property.type == 'stringArray'">
<span ng-hide="property.edit">{{property.value | join:', '}}</span>
<span ng-show="property.edit">
<textarea name="{{property.internal}}" id="{{property.internal}}{{item.id()}}" class="keywords" rows="1" cols="80"></textarea>
<span class="edit-button"><a ng-click="simpleUpdate(item, property)">save</a></span>
<span class="edit-button"><a ng-click="editProperty(item, property)">cancel</a></span>
</span>
<span class="edit-button" ng-show="property.editable && !property.edit"><a ng-click="editProperty(item, property)">edit</a></span>
</span>
<div class="clearboth"> </div>
</div>