我的应用程序包含一个带有寻呼机和pageSize选项的结果表(在ng-repeat中)。每次我点击寻呼机或更改页面大小时,都会向API发出新请求并更新循环中的数据,从而导致出现新的范围。我遇到了性能问题,因为当我检查batarang时,每个页面请求/ pageSize请求创建了大量的范围。有没有办法控制这个范围的创建?我使用的是Angular 1.3.3。
更新:http://jsfiddle.net/z561z7ok/
基本上包含太多'作用域的项目,以及为数据提供服务的项目。分页调用发送获取新数据的请求。
<div class="pageFilter">
<span translate="overview.pager_page"></span>
<pagination total-items="totalItems" ng-model="currentPage" previous-text="«" next-text="»" ng-click="triggerPager(currentPage)" max-size="maxSize" items-per-page="itemsDisplayedByPage"></pagination>
<div class="resultTable">
<div class="head row">
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-2">
<div class="key col-lg-2 col-md-2 col-sm-4 hidden-xs" ng-click="reverse = (sortOption == 'fruit_id'? !reverse : true); sortOption = 'fruit_id'">
<span ng-class="{active: sortOption == 'fruit_id'}" translate='overview.table.fruitsystem_fruit_number'></span>
<span class="sorting" ng-class="{active: sortOption == 'fruit_id', reverse: sortOption == 'fruit_id' && reverse}"></span>
</div>
<div class="key col-lg-2 col-md-2 hidden-xs hidden-sm" ng-click="reverse = (sortOption == 'end_date'? !reverse : true); sortOption = 'end_date'">
<span ng-class="{active: sortOption == 'end_date'}" translate='overview.table.fruit_end'></span>
<span class="sorting" ng-class="{active: sortOption == 'end_date', reverse: sortOption == 'end_date' && reverse}"></span>
</div>
<div class="key col-lg-2 col-md-3 col-sm-4 col-xs-12 description" ng-click="reverse = (sortOption == 'description_short'? !reverse : true); sortOption = 'description_short'">
<span ng-class="{active: sortOption == 'description_short'}" translate='overview.table.fruit_material'></span>
<span class="sorting" ng-class="{active: sortOption == 'description_short', reverse: sortOption == 'description_short' && reverse}"></span>
</div>
<div class="key col-lg-2 col-md-3 hidden-xs hidden-sm" ng-click="reverse = (sortOption == 'check_in_material_number'? !reverse : true); sortOption = 'check_in_material_number'">
<span ng-class="{active: sortOption == 'check_in_material_number'}" translate='overview.table.fruit_material_number'></span>
<span class="sorting" ng-class="{active: sortOption == 'check_in_material_number', reverse: sortOption == 'check_in_material_number' && reverse}"></span>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-7 col-xs-10">
<div class="key col-lg-2 hidden-xs hidden-sm hidden-md" ng-click="reverse = (sortOption == 'last_polling_date'? !reverse : true); sortOption = 'last_polling_date'">
<span ng-class="{active: sortOption == 'last_polling_date'}" translate='overview.table.fruit_last_request'></span>
<span class="sorting" ng-class="{active: sortOption == 'last_polling_date', reverse: sortOption == 'last_polling_date' && reverse}"></span>
</div>
<div class="key col-lg-2 hidden-xs hidden-sm hidden-md" ng-click="reverse = (sortOption == 'stock_amount_prediction'? !reverse : true); sortOption = 'stock_amount_prediction'">
<span ng-class="{active: sortOption == 'stock_amount_prediction'}" translate='overview.table.fruit_stock_amount'></span>
<span class="sorting" ng-class="{active: sortOption == 'stock_amount_prediction', reverse: sortOption == 'stock_amount_prediction' && reverse}"></span>
</div>
<div class="key col-lg-1 col-md-1 col-sm-1 col-xs-1 materialUnit" ng-click="reverse = (sortOption == 'measurement_unit'? !reverse : true); sortOption = 'measurement_unit'">
<span ng-class="{active: sortOption == 'measurement_unit'}" translate='overview.table.fruit_material_unit'></span>
<span class="sorting" ng-class="{active: sortOption == 'measurement_unit', reverse: sortOption == 'measurement_unit' && reverse}"></span>
</div>
<div class="key col-lg-3 col-md-6 col-sm-6 col-xs-6 actions">
<span translate='overview.table.fruit_actions'></span>
</div>
</div>
</div>
<div class="row result" ng-if="noFruits">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" translate="overview.table.no_results"></div>
</div>
<div class="row result" ng-repeat="fruit in fruits" ng-show="fruits.length > 0">
<div class="col-lg-6 col-md-6 col-sm-4 col-xs-2">
<div class="value col-lg-2 col-md-2 col-sm-4 hidden-xs fruitNumber">
<a cm-tooltip ng-click="openFruit(fruit.fruit_id)" ng-bind-html="fruit.fruit_id | highlight:searchText"></a>
</div>
<div class="dates value col-lg-2 col-md-2 hidden-xs hidden-sm">
<span cm-tooltip ng-bind-html="(fruit.end_date | date | highlight:searchText) || '-'"></span>
</div>
<div class="value col-lg-2 col-md-3 col-sm-4 col-xs-12 description">
<a cm-tooltip ng-click="openProduct(fruit.id)" ng-bind-html="fruit.description_short | highlight:searchText"></a>
</div>
<div cm-tooltip class="value col-lg-2 col-md-3 hidden-xs hidden-sm" ng-bind-html="(fruit.check_in_material_number | highlight:searchText) || '-'">
</div>
</div>
</div>
</div>
服务:
services.factory('fruitsCollectionService', ['$rootScope', '$http',
function($rootScope, $http) {
var fruitsCollectionModel = function() {
var collection = []
};
fruitsCollectionModel.prototype.getFruitsCollection = function(params) {
var self = this;
return $http.get(\\APICALL, {
cache: params.cached == true,
params: {
//a few params
},
withCredentials: true
}).then(
function(response) {
self.collection = response.data.fruits;
if(response.data.fruits.items.length > 0) {
angular.forEach(response.data.fruits.items, function(fruit, key) {
$rootScope.objectCache[fruit.id] = fruit;
});
}
return response;
},
function(response) {
// bring error notification to view
}
);
};
return fruitsCollectionModel;
}]);