Javascript 创建过多的作用域

我的应用程序由一个ng repeat中的结果表组成，其中包含一个寻呼机和pageSize选项。每次单击寻呼机或更改页面大小时，都会向API发出新的请求，并更新循环中的数据，从而出现新的作用域。我遇到了性能问题，因为当我检查batarang时，每个页面请求/页面大小请求都会产生数量惊人的作用域。有没有办法控制这个作用域的创建？我用的是Angular 1.3.3

更新：

基本上包含“范围”过大的项以及服务于数据的服务。分页调用发送获取新数据的请求

<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>

---

您需要提供一些代码来说明您正在做什么，JSFIDLE会更好，只是使用ng repeat和更新数据本身并不会导致这个范围爆炸问题，因为它描述了几乎所有人都会做的事情。您应该只有一个当前要显示的对象数组，并将其用于ng repeat，使用track by指定对象的id字段。使用新项目更新阵列将导致显示更新。Batarang糟透了，我不会太在意。听起来你发送的数据比预期的要多。您将获得为每行ng repeatWith创建的子作用域。在每行中，您是否使用指定作用域的ng控制器或指令？这将有助于解释这个问题，但没有实际的代码，或者你以其他人可以测试的方式复制这个问题，我们只能推测cause@Bill我在示例中添加了一部分，希望就足够了

    <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;
}]);