Error: [$compile:ctreq] Controller '$ionicScroll', required by directive 'collectionRepeat', can't be found!

ionic-v1
1

My webapp need to have multiple lists on one page, but i don’t know how to use ionScroll container.

Error: [$compile:ctreq] Controller '$ionicScroll', required by directive 'collectionRepeat', can't be found!
http://errors.angularjs.org/1.2.12/$compile/ctreq?p0=NaNonicScroll&p1=collectionRepeat
    at http://code.ionicframework.com/nightly/js/ionic.bundle.js:9009:12
    at getControllers (http://code.ionicframework.com/nightly/js/ionic.bundle.js:14991:19)
    at nodeLinkFn (http://code.ionicframework.com/nightly/js/ionic.bundle.js:15162:35)
    at compositeLinkFn (http://code.ionicframework.com/nightly/js/ionic.bundle.js:14567:15)
    at compositeLinkFn (http://code.ionicframework.com/nightly/js/ionic.bundle.js:14574:13)
    at nodeLinkFn (http://code.ionicframework.com/nightly/js/ionic.bundle.js:15155:24)
    at compositeLinkFn (http://code.ionicframework.com/nightly/js/ionic.bundle.js:14571:15)
    at compositeLinkFn (http://code.ionicframework.com/nightly/js/ionic.bundle.js:14574:13)
    at publicLinkFn (http://code.ionicframework.com/nightly/js/ionic.bundle.js:14476:30)
    at Object.fn (http://code.ionicframework.com/nightly/js/ionic.bundle.js:41968:35) ionic.bundle.js:18366
(anonymous function) ionic.bundle.js:18366
(anonymous function) ionic.bundle.js:15777
nodeLinkFn ionic.bundle.js:15164
compositeLinkFn ionic.bundle.js:14567
compositeLinkFn ionic.bundle.js:14574
nodeLinkFn ionic.bundle.js:15155
compositeLinkFn ionic.bundle.js:14571
compositeLinkFn ionic.bundle.js:14574
publicLinkFn ionic.bundle.js:14476
(anonymous function) ionic.bundle.js:41968
Scope.$digest ionic.bundle.js:20761
Scope.$apply ionic.bundle.js:21014
(anonymous function) ionic.bundle.js:42013
(anonymous function) ionic.bundle.js:11547
forEach ionic.bundle.js:9241
eventHandler ionic.bundle.js:11546
triggerMouseEvent ionic.bundle.js:2691
tapClick ionic.bundle.js:2680
tapMouseUp ionic.bundle.js:2750

index.html

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>mytitle</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="main.js"></script>
  </head>
<body ng-controller="RootCtrl">
    
    <ion-tabs class="tabs-positive tabs-icon-only">

      <ion-tab title="Home" 
               icon-on="ion-ios7-star" 
               icon-off="ion-ios7-star-outline" 
               ng-controller="HomeCtrl">
        
        <ion-header-bar class="bar-positive">
          <h1 class="title">home</h1>
        </ion-header-bar>
        
        <ion-content  has-header="true" >

      
         <ion-list >

      <a  collection-repeat="item in items"
      collection-item-width="'100%'"
      collection-item-height="getItemHeight(item, $index)"
      ng-style="{height: getItemHeight(item, $index)}"
      href="#/{{item.id}}" 
      class="item my-item  item-avatar item-button-right  ">
        <img class="img my-image" ng-src="image/icon/{{ item.icon_url }}">
        <h2>{{ item.app_name }}</h2>
        <h4>{{ item.app_describe }}</h4>
        <h4>{{ item.app_added_amount }}</h4>
        <button class="button my-button button-small button-outline button-balanced">add</button>    
      </a>


          </ion-list>
        </ion-content>
      </ion-tab>

      <ion-tab title="Top" 
      	icon-on="icon ion-ios7-clock" 
      	icon-off="icon ion-ios7-clock-outline"
      	ng-controller="TopCtrl">
        <ion-header-bar class="bar-positive">
          <h1 class="title">top</h1>
        </ion-header-bar>
        <ion-content  overflow-scroll="true" >
          
      <a  collection-repeat="item in items"
      collection-item-width="'100%'"
      collection-item-height="getItemHeight(item, $index)"
      ng-style="{height: getItemHeight(item, $index)}"
      href="#/{{item.id}}" 
      class="item my-item  item-avatar item-button-right  ">
        <img class="img my-image" ng-src="image/icon/{{ item.icon_url }}">
        <h2>{{ item.app_name }}</h2>
        <h4>{{ item.app_describe }}</h4>
        <h4>{{ item.app_added_amount }}</h4>
        <button class="button my-button button-small button-outline button-balanced">add</button>    
      </a>


          </ion-content>
      </ion-tab>
 </ion-tabs>

  </body>

angular.module('ionicApp', ['ionic'])

.controller('RootCtrl', function($scope) {
  $scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {
    console.log('Controller changed', oldController, oldIndex, newController, newIndex);
    console.log(arguments);
  };
})

main.js

.controller('HomeCtrl', function($scope,$http) {
  $scope.items = [];

   $http.get('/webapps/home/index/lists').then(function(resp) {
    $scope.items = resp.data;
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });

$scope.getItemHeight = function(item, index) {
    //Make evenly indexed items be 10px taller, for the sake of example
    return 80;
  };


})

.controller('TopCtrl', function($scope,$http) {
  $scope.items = [];

   $http.get('/webapps/home/index/tops').then(function(resp) {
    $scope.items = resp.data;
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });

$scope.getItemHeight = function(item, index) {
    //Make evenly indexed items be 10px taller, for the sake of example
    return 80;
  };


})
2

Collection repeat needs to use our JS scrolling system. To do this change your code to this.

<ion-content>

<a collection-repeat="item in items"
collection-item-width="'100%'"
collection-item-height="getItemHeight(item, $index)"
ng-style="{height: getItemHeight(item, $index)}"
3

Thank you! It’s ok. The problem has been resolved.

4

Do you mean, that the problem is caused by having overflow-scroll="true" ?, cause I don’t have it. And I am getting the same issue.

Here is my HTML:

    <ion-slide-box auto-play="true"  does-continue="true" slide-interval="2500" show-pager="true" active-slide="activeSlide" on-slide-changed="slideHasChanged($index)" >
        <ion-slide ng-repeat="element in list">
            <div class="box">
                <a href="{{element.href}"> 
                     <img image-lazy-src="{{element.src}}">
                </a> 
            </div>
        </ion-slide>
    </ion-slide-box>
5

Could you please provide a codepen demo

6

How was it resolved?

7

I have nested collection-repeats and get the '$ionicScroll', required error

<div collection-repeat="section in sectionsWithProducts">
    <section-directive class="row" section-name="section.name"></section-directive>
      <div class="" style="align-items: center; justify-content: center;">
      <div class="col card-wrapper" collection-repeat="item in section.products" item-render-buffer="9">
        <product-card product="item" on-exclude="exclude(item)" on-add="add(item)" on-detail="detail(item)">
        </product-card>
      </div>
     </div>
</div>
8

I get the error while using nested collection-repeat too, do you have any change to avoid the error?

1 Like
9

I changed to nested ng-repeat. Couldn’t find a solution with collection-repeat.