Ionic scroll won't fire on load with $getByHandle()

Question

I'm trying to scroll down to delegate-handle="start" with ionic on load. When i try to run it, i get this message in console.

Delegate for handle "small" could not find a corresponding element with delegate-handle="small"! scrollTop() was not called!

Possible cause: If you are calling scrollTop() immediately, and your element with delegate-handle="small" is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to scrollTop() and try again.

My code looks like this, can somebody maybe see what is wrong?

$timeout(function() {
     $ionicScrollDelegate.$getByHandle('start').scrollTop();

}, 10);

If i use $ionicScrollDelegate.scrollBottom(), it will scroll to the bottom, so it must be a problem with the specific function.

The html code

     <ion-view title="Kalender">
   <ion-content>
    <ion-list ng-repeat="activity in calendar">

       <div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
        <div class="header-divider-small">{{activity.year}}</div>
        <div class="header-divider">{{activity.date_divider}}</div>
      </div>

        <div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
            <span class="header">{{activity.name}}</span>
              <br />
              <span class="text">{{activity.time}} - {{activity.place}}</span>
              <a class="button button-icon icon {{activity.icon}} right not-selected"></a>
        </div>


    </ion-list>
    <div delegate-handle="start"></div>
  </ion-content>
</ion-view>

Thanks.

Answer 1

Ionic 1.0.0-beta14 has some strange issue with getByHandle() so you can do it this way:

$timeout(function() {
    var startHandle = _.find($ionicScrollDelegate._instances, function (s) {
        return s.$$delegateHandle === "start";
    });
    startHandle.scrollTop();
});

Solution source at forum.ionicframework.com

Answer 2

I think there is a misunderstanding about what the delegate handle does here. Delegate handle is a way to name scroll/content containers. Think of it like a way to give your <ion-content> container a unique name that can be later used with the service. It is possible to have multiple <ion-content> containers on a single view, and this is why the naming is necessary. If you only have one scroll area or don't specify the handle, then it just uses the first view it finds.

You want to scroll to a particular place in the application, which is the job of $ionicScrollDelegate.anchorScroll('element-id');. Take a look at your code here with some modifications. I've put the delegate handle in the correct place, and then use the anchorScroll method to automatically scroll to that ID in the page.

Markup

<ion-view title="Kalender">
   <ion-content delegate-handle="kalendar">
    <ion-list ng-repeat="activity in calendar">

       <div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
        <div class="header-divider-small">{{activity.year}}</div>
        <div class="header-divider">{{activity.date_divider}}</div>
      </div>

        <div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
            <span class="header">{{activity.name}}</span>
              <br />
              <span class="text">{{activity.time}} - {{activity.place}}</span>
              <a class="button button-icon icon {{activity.icon}} right not-selected"></a>
        </div>


    </ion-list>
    <div id="start"></div>
  </ion-content>
</ion-view>

Controller

$timeout(function() {
   $ionicScrollDelegate.$getByHandle('kalendar').anchorScroll('start');
}, 10);