Ionic pager directive for infinite scroll

@saqueib wrote:

I wanted to use <ion-infinite-scroll> in multiple screen so I created a wrapper directive for this, but pager offset value is not updating, its making call with same /?limit=10&offset=10 every time, here is my code

.directive('wfPager', function($http) {
return {
  restrict: 'EA',
  scope: {
    perPage: '=',  // Per page item
    dataset : '=', // Controller scope of dataset
    distance : '@',
    dataroot : '@', // Server response dataroot { content.rewards : [] }
    url : '@',  // url to fetch the data
    offset : '=',
    limitKey : '@',
    offsetKey : '@',
  },
  template: '<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="{{distance}}%"></ion-infinite-scroll>',
  link : function (scope, element, attrs) {
      var isPreviousFetchComplete = true,
          isDataAvailable = true,
          params;
          var i = 0;

          // Per page and offset init
          scope.perPage = scope.perPage || 10;
          scope.offset = scope.offset || 10;

          // Set the default limit and offset keys
          scope.limitKey = scope.limitKey || 'limit';
          scope.offsetKey = scope.offsetKey || 'offset';

          // Set the dataroot from response
          scope.dataRoot = scope.dataRoot || 'rewards';

          // Create the object to pass as params
          params = {};
          params[scope.limitKey] = scope.perPage;
          params[scope.offsetKey] = scope.offset;

          // Check for url
          if(! scope.url ) throw new Error('I need a url to fetch the data!');

          scope.loadMore = function () {

            if (isPreviousFetchComplete && isDataAvailable) {
              // Mark ongoing call
              isPreviousFetchComplete = false;

              $http.get(scope.url, { params: params }).then(function(res){
                var resData = res.data;

                  if(resData && resData.content[scope.dataroot].length > 0 ) {
                    // Append the data to the dataset
                    for (var i = resData.content[scope.dataroot].length - 1; i >= 0; i--) {
                       scope.dataset.push(resData.content[scope.dataroot][i]) ;
                    }

                    // Update the pager for next page
                    scope.perPage = scope.perPage + scope.offset;
                    console.info(++i);

                  } else {
                    isDataAvailable = false;
                  }

              })
              .catch(function(res){
                console.errro('There was some error whilte making requer');
                console.info(res);
              })
              .finally(function(){
                isPreviousFetchComplete = true;
                scope.$broadcast('scroll.infiniteScrollComplete');
              });
            }

          };

      }
    };
 })

and used it as

<div
    wf-pager
    per-page="data.limit"
    offset="data.offset"
    distance="10"
    dataset="data.rewards"
    url="rewards"
    dataroot="rewards">
</div>

any help will be very appreciated since i am not very good in directive.

Posts: 1

Participants: 1

Read full topic