角度创建太多范围

时间:2015-01-24 06:41:15

标签: javascript angularjs

我的应用程序包含一个带有寻呼机和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;
}]);

0 个答案:

没有答案