Collection-repeat inside collection-repeat


#1

Hello. I’m trying to create a list of items. I previously did this with ng-repeat and noticed the application was crashing.

I’ve started using collection-repeat. it all seemed to be working fine here

<ion-content class="has-header">
<ion-refresher pulling-text="" on-refresh="doRefresh()"></ion-refresher>
<div class=""
    collection-repeat="item in items"
    collection-item-width="'100%'"
    collection-item-height="'100%'">
    

	<div class="list card">
		<img ng-click="goToItemDetails(item, $index)" class="full-image" ng-src="{{item.image.Url}}">
	</div>

  </div>
<div ng-hide="items">nothing</div>
<ion-infinite-scroll on-infinite="loadMore()" ng-if="!moredata" distance="1%"></ion-infinite-scroll>
<!--ng-if="noMoreItemsAvailable"-->
</ion-content>

The problem is as soon as I add another collection-repeat inside the existing collection-repeat like this:

<ion-content class="has-header">
<ion-refresher pulling-text="" on-refresh="doRefresh()"></ion-refresher>
<div class=""
    collection-repeat="item in items"
    collection-item-width="'100%'"
    collection-item-height="'100%'">
    

	<div class="list card">
		<img ng-click="goToItemDetails(item, $index)" class="full-image" ng-src="{{item.image.Url}}">
	</div>

	<div class=""
    collection-repeat="comment in item.comments"
    collection-item-width="'100%'"
    collection-item-height="'100%'">

	</div>
	

  </div>
<div ng-hide="items">nothing</div>
<ion-infinite-scroll on-infinite="loadMore()" ng-if="!moredata" distance="1%"></ion-infinite-scroll>
<!--ng-if="noMoreItemsAvailable"-->
</ion-content>

I receive the following message: Error: [$compile:ctreq] Controller ‘$ionicScroll’, required by directive ‘collectionRepeat’, can’t be found!

I used to use ng-repeat inside of other ng-repeats. Is there something I’m missing here?

Many thanks


#2

same issue, did you found the solution?

plz advise,

thx.


#3

Multiple collection-repeat in the same view need separate scrolls, when you establish one without a scroll wrapping it takes the ion-content’s scroll, but you need to specify them for more than 1. Also It may crush throwing a “too much recursion” error, but seeing your code I wouldn’t know how to code around that case.