[Resolved] Issue Beta.14: ion-infinite-scroll keep on calling the method of on-infinite

I have implemented infinite scroll as follows:

Route:

		.state('app.perfiltab', {
		url: "/perfil/:tab",
		views: {
			'menuContent' :{
				templateUrl: "templates/perfil/perfil.html",
				controller: 'PerfilCtrl',
			}
		},
		authRequired: true
	})
	
	.state('app.perfil', {
		url: "/perfil",
		views: {
			'menuContent' :{
				templateUrl: "templates/perfil/perfil.html",
				controller: 'PerfilCtrl',
			}
		},
		authRequired: true
	})

HTML

		<div ng-repeat="credito in datos.creditos">
			<div class="row creditos">
				<i class="icon" ng-class="{'ion-arrow-up-a balanced': {{credito.suma}}, 'ion-arrow-down-a assertive': !{{credito.suma}}}"></i>&nbsp; 
                {{credito.fecha}} | Créditos {{credito.cantidad}} | {{credito.descripcion}}
			</div>
		</div>
		<ion-infinite-scroll ng-if="datos.hayMas" 
           	on-infinite="loadMore()" 
            distance="5%"
            icon="ion-load-d">
        </ion-infinite-scroll>  

Control

…

$scope.datos = {
				tab: 					0,
				creditos:				[],
				hayMas:					true,
				page:					1,
};

		var tab			= $stateParams.tab;
		if (tab !== undefined) {
			if (tab == '1') {
				... initial values from tab 1...			
			}
		}
  $scope.loadMore = function() {    console.log('entra loadmore');
		CreditosServ.getCreditos($scope.datos.page).then(function (datosCreditos) {
			$scope.datos.creditos_totales	= datosCreditos.total;
			angular.forEach(datosCreditos.creditos, function(item) {
				$scope.datos.creditos.push({
					descripcion: 	item.descripcion,
				});
			});

			if ($scope.datos.creditos.length == datosCreditos.total_historial ) {
			  	$scope.datos.hayMas = false;
			} else {
				$scope.datos.page += 1;
			}
			$scope.$broadcast('scroll.infiniteScrollComplete');
			
		}, function(error) {...
		});
  };		

Acces with this: “#/app/perfil/”, work, scroll with loadMore()
But access “#/app/perfil/0”, not working. No running loadMore, Any idea what happens?

(deleted text)

I was originally complaining that this bug is still present in 1.0.1, but I just discovered I was doing something wrong.

I was calling $scope.$broadcast(‘scroll.infiniteScrollComplete’) in my loadMore() function, rather than in the success callback passed to then of the promise returned when I load more data. Whoops!

I think there is no bug right now. The loadmore function is called only once. $scope.$broadcast(‘scroll.infiniteScrollComplete’) should be called on the success of completion of your required task,

@bkendall @kartikeya

Implemented in this way:

View:

    <ion-content class="has-header has-footer" delegate-handle="myScrollDelegateHandle"> <div class="item item-body" ng-show="datos.tab==0">            <div ng-repeat="credito in datos.creditos"><div class="creditos"><i class="icon" ng-class="{'ion-arrow-up-a balanced': {{credito.suma}}, 'ion-arrow-down-a assertive': !{{credito.suma}}}"></i>&nbsp;{{credito.fecha}} | Créditos {{credito.cantidad}} | {{credito.descripcion}}</div></div>            <ion-infinite-scroll ng-if="puedeCargarMas()"                   on-infinite="loadMore()"                 distance="2%"                icon="ion-load-d"></ion-infinite-scroll>                        </div>      </ion-content>

Controller:

  $scope.loadMore = function() {
        $scope.datos.hayMas = false;
        
        CreditosServ.getCreditos($scope.datos.page).then(function (datosCreditos) {
            angular.forEach(datosCreditos.creditos, function(item) {
                $scope.datos.creditos.push({
                    cantidad:         item.cantidad,
                    descripcion:     item.descripcion,
                });
            });

            if ($scope.datos.creditos.length < datosCreditos.total_historial ) {
                $timeout(function () {
                    $ionicScrollDelegate.$getByHandle('myScrollDelegateHandle').scrollBy(0, 0);
                    $scope.datos.page += 1;
                      $scope.datos.hayMas = true;
                }, 1000);
            }
            $scope.$broadcast('scroll.infiniteScrollComplete');
            
        }, function(error) {
            alert('Los creditos no se cargaron, intente nuevamente');
        });
  };        

    $scope.puedeCargarMas = function () {
        return $scope.datos.hayMas;
    };

Gives this error:

Error: [$rootScope:inprog] AngularJS
S/<@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:38:417
k@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:149:465
Pe/this.$get</l.prototype.$apply@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:157:514
o@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:385:22488
a@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:385:22864
e.Utils.throttle/<@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:23:3440
lf/c@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:64:384
e.EventController.trigger@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:22:11084
e.views.Scroll<.initialize/i.triggerScrollEvent<@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:23:9252
e.Utils.throttle/<@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:23:3440
e.views.Scroll<.getRenderFn/<@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:23:21825
e.views.Scroll<.__publish@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:23:30601
e.views.Scroll<.scrollTo@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:23:25200
e.views.Scroll<.scrollBy@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:23:25360
s.scrollBy/<@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:387:7726
f/<@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:144:20
Pe/this.$get</l.prototype.$eval@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:157:301
Pe/this.$get</l.prototype.$digest@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:154:390
Pe/this.$get</l.prototype.$apply@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:158:56
f/l<@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:170:241
e@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:72:72
nf/m.defer/c<@http://localhost/app/lib/ionic/js/ionic.bundle.min.js:76:112

http://localhost/app/lib/ionic/js/ionic.bundle.min.js
Line 134

If I do not use the handle, and change:

            if ($scope.datos.creditos.length < datosCreditos.total_historial ) {
                  $scope.datos.hayMas = true;
                $scope.datos.page += 1;
            }
            $scope.$broadcast('scroll.infiniteScrollComplete');

Call the service to access all pages (ie not going to find only one page when the distance is correct) does not seem to be working infiniteScrollComplete.

Any error? What is the correct way to use it? Thanks

I had the same issue. Problem was that my parent div had overflow: auto. I removed it and everything works now

I had the same issue. What is the correct way to use it? Thanks

great! it works for me