2

I build hybrid app through Intel xdk (version 3759) using Ionic framework (version 1.0.0-beta.14) and i have a problem with infinite scroll. The 'on-infinite' directive calls function on the app loads, and don't stop.

My app pages is on unique html file (sub_pages).

In my scenario i need load all tickets, for this reason a use 'limitTo' to restrict tickets in page.

Piece of html

<div id="lista_tickets_page" ng-controller="TicketsController as ticketCtrl" class="upage-content vertical-col left hidden has-subheader">


  <ion-scroll>
    <div style="margin-top:100px;">

      <ion-list class="widget uib_w_81 d-margins" data-uib="ionic/list" data-ver="0">
        <div class="card card-1 border-card" data-uib="ionic/list_item" data-ver="0" id="list_ticket" ng-repeat="ticket in ticketCtrl.tickets  | filter:ticket_cod | limitTo:numberDisplay" item="ticket" ng-class="ticketCtrl.getClass(ticket[2])">

        </div>

      </ion-list>

      <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>


    </div>
  </ion-scroll>
</div>

Piece of controller

angular
  .module('myApp')
  .controller("TicketsController", ['Ticket', 'baseHost', 'baseCall', 'User', '$scope', '$rootScope', '$interval', '$timeout', '$ionicScrollDelegate',
      function(Ticket, baseHost, baseCall, User, $scope, $rootScope, $interval, $timeout, $ionicScrollDelegate) {

        var self = this;
        $scope.numberDisplay = 5;
        $scope.noMoreItemsAvailable = false;

        $scope.loadMore = function() {

          $scope.numberDisplay += 5;

          if ($scope.numberDisplay >= self.count)
            $scope.noMoreItemsAvailable = true;

          $scope.$broadcast('scroll.infiniteScrollComplete');

        };


        $scope.$on('$stateChangeSuccess', function() {

          $scope.loadMore();
        });
Charuක
  • 12,953
  • 5
  • 50
  • 88
lesimoes
  • 888
  • 2
  • 9
  • 26
  • Where do you specify the `self.count`? – Ilya Luzyanin Dec 27 '16 at 19:02
  • In another part of code. This is only piece of all controller code. There's no erro in this variable. – lesimoes Dec 27 '16 at 19:08
  • So at some point `$scope.noMoreItemsAvailable` becomes true but scroll is still there? – Ilya Luzyanin Dec 27 '16 at 19:10
  • When 'noMoroItemsAvailable' turns true infinite-scroll icon disappears (ng-if make this). The problem occurs when apps load on another page and call 'loadMore' function. This event only when scroll lista_tickets_page. – lesimoes Dec 27 '16 at 19:16
  • 1
    Ok, I probably didn't get it completely, but `$scope.$on('$stateChangeSuccess', ...` will be triggered on every location change, maybe that is what you mean? Have you tried specifying `immediate-check=true` on `ion-infinite-scroll` element instead? – Ilya Luzyanin Dec 27 '16 at 19:27
  • I try immediate-check (false or true), but din't work. I see now this problem occurs only when simulate xdk view is active, looks like a problem in xdk. I'm build the apk for test in device. – lesimoes Dec 27 '16 at 19:43

0 Answers0