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

dblanco · April 2, 2015, 3:55pm

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?

bkendall · July 10, 2015, 3:31pm

(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!

kartikeya · August 15, 2015, 8:33am

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,

dblanco · August 22, 2015, 8:09pm

@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

yernar · January 17, 2016, 8:46am

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

shrikant_newgen · July 14, 2016, 11:08am

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

kapposds · December 16, 2016, 3:30pm

great! it works for me

Topic		Replies	Views
Please help with infinite scroll ionic-v1	4	1408	July 6, 2015
Problem with ionic infinite scrolloing ionic-v1	0	460	November 11, 2014
[Resolved by Myself] Ion-infinite-scroll keep on calling the method of on-infinite ionic-v1	1	2299	March 23, 2015
Multiple ion-infinite-scroll on the same view requires an additional data attribute to prevent inappropriately firing finishInfiniteScroll ionic-v1	3	2056	May 19, 2016
Infinite-scroll + end of list ionic-v1	3	5345	March 13, 2014

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

Related topics