ionicScrollDelegate with ionic (AngularJS)

Question

New to ionic, and trying to figure out why I can't get ionicScrollDelegate to work correctly. I have this following markup:

 <content has-header="true" on-refresh="refreshFriends()" padded="true">
          <ion-scroll delegate-handle="myScroll">
      <refresher></refresher>
      ....
     </ion-scroll>

And then in the controller:

 angular.module('starter.controllers', [])

.controller('MenuCtrl', function($scope, $ionicScrollDelegate, $http, $location, APIService) {

    var delegate = $ionicScrollDelegate.$getByHandle('myScroll');

    delegate.rememberScrollPosition('my-scroll-id');
    delegate.scrollToRememberedPosition();
    .....

}); However, on load - I get this error in the console:

Error: [$injector:unpr] Unknown provider: $ionicScrollDelegateProvider <- $ionicScrollDelegate

Any advice here? I am loading content in a ng-view, like this:

APIService.async().then(function(d) {
  if (d.meta.code == 200) {
    $scope.checkins = d.response.checkins.items;

  }
});

So I'm not sure if there a timing thing here, but I placed the declaring of the $ionicScrollDelegate, inside this async function and had no luck.

I believe I am following the directions correctly. Thanks!

UPDATE Here is the app.js code:

   angular.module('starter', ['ionic', 'ngRoute', 'ngAnimate', 'starter.services',      'starter.controllers'])

  .config(function ($compileProvider){
 // Needed for routing to work
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
 })

  .config(function($routeProvider, $locationProvider) {

...
 });

 document.addEventListener("deviceready", function(e) {
 ionic.Platform.detect();
}, false);

Solution 1

did you try wrapping the call to get the handle like this?

setTimeout(function() {
    var delegate = $ionicScrollDelegate.$getByHandle('myScroll');

    // rest of related code included here...

},10);

This was a solution provided here in the forums, see link below

http://forum.ionicframework.com/t/ionicscrolldelegate-on-view-load-event/2661

Solution 2

You can use ionic life cycle:

$scope.$on('$ionicView.loaded', function(){

        console.log('$ionicView.loaded');

        $ionicScrollDelegate.scrollTo(0,$rootScope.top,false);
    });

Comments

[tasseKATT]

The code you have shown worked for me. Can you show all your angular.module definitions? Sounds like a module dependency is missing somewhere in the chain.

[gregavola]

I've added the module definitions to the post.

[tasseKATT]

Sorry, no idea: plnkr.co/edit/DtW59yYfVPS1r1TpDOBG?p=preview

[Ross]

This will be great if it solves the issue. I chimed in on that post about using setTimeout / $timeout.

[zinking]

when the controller has loaded, the child <ion-content> has not loaded yet. Therefore, $ionicScrollDelegate won't work until a timeout.

[Sufiyan Ansari]

$ionicScrollDelegate is not defined...?