Rc-02: Collection-Repeat issue

1

Currently, I’m working on implementing the Collection-Repeat directive into one of my views. The view is pulling an array object with over 200 items (around 220), very lightweight just text data. I’m getting the following issues with collection repeat in this view, iterating over the data object:

RangeError: Maximum call stack size exceeded
at RepeatController.scrollView.__callback [as __$callback] (file:///android_asset/www/lib/ionic/js/ionic.bundle.js)

Any ideas on why? I’m following the Ionic Docs on collection-repeats use. Is my object just simply too large?

2

Of note, I get the same error with rc-01 and rc-0

3

It works correctly for me in rc1 with over 1000 text records, try to post your code.

4 
<div class="card reduced_margin" collection-repeat="order in myOrders.orders">
...
</div

Function fetching the data:

$scope.getAllmyOrders = function() {
		$scope.myOrders = {};
		$scope.myOrders.orders = [];
		console.log('loading');
		$ionicLoading.show({
			    template: 'Loading <i class="icon ion-loading-c"></i>',
			    animation: 'fade-in',
			    delay: 500
		    });
		ProductionDataFactory.getData().getmyOrders().$promise.then(
			function(myOrdersObject){
			
				$scope.myOrders.orders = myOrdersObject.orders;
				var totalsObject = DashHelperFactory.gatherTotals($scope.myOrders.orders);

					$ionicLoading.hide();

					$scope.myOrders.sumOfOrders = totalsObject.sumOfOrders;
					$scope.myOrders.sumOfCounter = totalsObject.sumOfCounter;
					$scope.myOrders.sumOfYrd = totalsObject.sumOfYrd;
					$scope.myOrders.sumOfPluses = totalsObject.sumOfPluses;
					console.log($scope.myOrders.orders);

			}, function(err) {}
		);
	};

The infinite scrolling function (I switch out the first function with this one when I’m trying out infinite scrolling):

$scope.getMyOrders = function () {
			var iterations = 10;

			// First load
		if(!($scope.myOrders)){
			$ionicLoading.show({
			    template: 'Loading <i class="icon ion-loading-c"></i>',
			    animation: 'fade-in',
			    delay: 500
		    });

			DataFactory.getData().getMyOrders().$promise.then(
				function (myOrdersObject){
					$scope.myOrders = {};
					$scope.myOrders.orders = [];
					myOrdersTotal =myOrdersObject.orders;
					$scope.dataLength = myOrdersTotal.length;
					$scope.displayCount = 0;

					if ($scope.dataLength < iterations){
						iterations = $scope.dataLength;
					}

					for ($scope.displayCount; $scope.displayCount < iterations; $scope.displayCount++){
						($scope.myOrders.orders).push(myOrdersTotal[$scope.displayCount]);
					}

					var totalsObject = DashHelperFactory.gatherTotals(myOrdersTotal);

					$ionicLoading.hide();

					$scope.myOrders.sumOfOrders = totalsObject.sumOfOrders;
					$scope.myOrders.sumOfCounter = totalsObject.sumOfCounter;
					$scope.myOrders.sumOfYrd = totalsObject.sumOfYrd;
					$scope.myOrders.sumOfPluses = totalsObject.sumOfPluses;

					$scope.$broadcast('scroll.infiniteScrollComplete');						
				},
				function (errResponse){}
			);
		}
		else{
			if ($scope.displayCount+iterations > $scope.dataLength){
				iterations = $scope.dataLength - $scope.displayCount;
			}
			console.log('iterations: ' + iterations);
			for (var x = 0; x < iterations; x++){
				($scope.myOrders.orders).push(myOrdersTotal[$scope.displayCount]);
				$scope.displayCount++;
			}

			$scope.$broadcast('scroll.infiniteScrollComplete');
			console.log($scope.myOrders.orders);
		}
	};

The code where … is in html, accesses quite a few properties to display from the order object. Over 10

Currently the size of myOrders is 211 objects within an array set, and myOrders has quite a few properties as well.

Of note, I tried implementing Infinite Scrolling with this (as you can see in the second function), so the display would only be handling 10 items at first (and loading 10 more on scroll), but I still get call stack size exceeded.

And, when I switch back to regular ng-repeat, everything works perfectly.

Thoughts?

5

Did you ever resolve this rendering delay on a collection repeat? We are having similar issues with the current 1.1.0 version of ionic. It appears that it may be related to padding-styling on the items even though we have a set height but we are still trying to debug at present.