angularjs - cloak - Función de desplazamiento infinito iónico invocada en carga de página

ng-init

Question

Estoy usando un marco iónico para crear una aplicación básica de Feed. Tengo la actualización, pero estoy teniendo problemas con mi ion-infinite-scroll.

Feed.html

<ion-content ng-controller="FeedController" >
<ion-refresher pulling-text="Pull to refresh.." on-refresh="get_feeds()" refreshing-text="Fetching ..." refreshing-icon="ion-loading-b">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="question in questions">
<div class="item item-divider">
{{question.question}}
</div>
<div class="item" ng-bind-html="question.answer | trustHtml">
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll
on-infinite="get_more()"
distance="1%">
</ion-infinite-scroll>
</ion-content>

Feed.js

 (function(){
"use strict";
angular.module( ''app.controllers'' ).controller( ''FeedController'',
[ ''eTobb'', ''Users'', ''$scope'', ''$timeout'', function( eTobb, Users, $scope, $timeout) {
var pageIndex = 1;
$scope.questions = [];
$scope.get_feeds = function(pageIndex){
eTobb.get($scope.apiCall, { user_id: Users.id, page: 0 }, function(response) {
if ( response ){
$scope.questions = $scope.questions.concat(response);
console.log($scope.questions);
}
})
.finally(function(){
$scope.$broadcast(''scroll.refreshComplete'');
$scope.$broadcast(''scroll.infiniteScrollComplete'');
});
};
$scope.get_more = function(){
$scope.get_feeds(pageIndex);
pageIndex = pageIndex + 1;
console.log(''why the hell am i being called?'');
};
}
]);
})(); 

Problema

El método definido en la propiedad de infinito se llama dos veces cuando la página se carga y luego se llama normalmente (una vez) cada vez que se alcanza la parte inferior de la página. ¿Alguien sabe por qué pasa esto?

Answer 1

La respuesta de ''Función de desplazamiento infinito iónico invocada en carga de página'' es immediate-check="false" en ion-infinite-scroll

Answer 2

La respuesta de RMD resolvió el problema para mí en una computadora, pero cuando vm.loadMore() mi aplicación en Android, se vm.loadMore() mi función vm.loadMore() manera inmediata, aunque immediate-check="false" vm.loadMore() immediate-check="false" en mi elemento ion-infinite-scroll . Lo resolví agregando una variable auxiliar vm.initialSearchCompleted = false; al controlador, y a mi elemento de ion-infinite-scroll como este:

<ion-infinite-scroll
on-infinite="vm.loadMore()"
distance="1%"
immediate-check="false"
ng-if="vm.canLoadMoreResults && vm.initialSearchCompleted">
</ion-infinite-scroll>

Cuando se completó la llamada inicial a mi función vm.search() , configuré vm.initialSearchCompleted = true; . Eso solucionó el problema.

Answer 3

Puede usar ng-if en ion-infinite-scroll, de modo que cuando no haya datos, no se llamará al manejador de on-infinite.

<ion-infinite-scroll
on-infinite="get_more()"
distance="1%"
ng-if="questions.length">
</ion-infinite-scroll>

Answer 4

También me encontré con este problema, sin embargo, el uso de ng-if no resolvió el problema, ni creo que sea la forma correcta de resolver este problema.

De acuerdo con la documentation de Ionic, solo usaría ng-if para indicar que no hay más datos disponibles, y para evitar que el controlador infinito realice llamadas adicionales al método "get_more".

Lo que encontré que fue la causa de esta llamada inesperada "get_more ()" durante una carga de página se debió a que el controlador infinito pensaba que no había suficiente contenido durante la primera carga (es decir: la carga inicial no proporcionó los resultados suficientes para llenar el página), y como tal inició inmediatamente otra solicitud de carga.

En mi caso particular, había devuelto más que suficientes registros para llenar la página, sin embargo, el controlador infinito aún estaba solicitando más. Mi lista estaba principalmente llena de imágenes, y creo que el desplazador estaba llamando incorrectamente a "get_more ()" debido a problemas de tiempo entre el momento en que se cargaron las imágenes y cuando se verificó si la página estaba llena.

En cualquier caso, la solución a mi problema era decirle que no realizara una verificación de límites inmediata en la carga; usted hace esto con el atributo de verificación inmediata, es decir:

<ion-infinite-scroll immediate-check="false" on-infinite="vm.localDataManager.getData()" ng-if="vm.localDataManager.canGetData()" distance="1%">