javascript - How to combine ion-refresher and ion-infinite-scroll? -

i have far , working horrible, everytime go bottom of page, reloads , throw me top

  <ion-content>     <ion-refresher       on-refresh="dorefresh()">     </ion-refresher>     <div ng-repeat="post in posts">       <a ng-href="#/tabs/news/{{post.site_id}}/{{post.id}}">         <h2 ng-bind-html="post.title"></h2>         <p>{{:: post.date | date}}</p>       </a>     </div>     <ion-infinite-scroll             on-infinite="loadmore()"             distance="1%">      </ion-infinite-scroll>   </ion-content> 

and controller

.controller('newsctrl', function($scope, $ionicloading,                                  $stateparams, freshlypressed) {    $scope.posts = [];    $scope.loadmore = function() {     $scope.posts = freshlypressed.getblogs($scope);     $scope.$broadcast('scroll.infinitescrollcomplete');   },    $scope.dorefresh = function() {     $scope.posts = freshlypressed.getblogs($scope);     $scope.$broadcast('scroll.refreshcomplete');   }   $scope.dorefresh();  }); 

it looks problem you're broadcasting infintescrollcomplete , refreshcomplete before completed. appear asynchronous requests, you're responding though synchronous.

this happening:

$scope.posts = freshlypress.getblogs($scope); // call goes out $scope.$broadcast(etc); // call still out,  // (call comes @ variable time, $broadcast needs occur @ time) 

to handle this, need either callback or promise, depending on api of getblogs function. looks getblogs doing bit of magic either add result $scope internally or returns empty array/object , populates when result comes in. either way, breaking single responsibility principle. getblogs should return data in callback/promise , let controller decide data.

var limit = 10; // max results var offset = 0; // starting index $scope.posts = []; // add results here come in $scope.loadmore = function() {   freshlypressed.getblogs(limit, offset).then(function(results) {     $scope.posts = $scope.posts.concat(results); // add results     offset = $scope.posts.length; // adjust offset next query     $scope.$broadcast('scroll.infinitescrollcomplete');   }); }; // <-- had comma here 

for refresh, reset state:

$scope.posts = []; // empty results offset = 0; // start @ first post 

and can load more posts before.