Infinite scroll not triggered on page load


#1

Dear community,
By default, inifinite scroll is triggered on page load, isn’t it? But in my case, it isn’t. What worse, on android device, the page refresh triggers page reloading and a subsequent infinite scroll.
I am using ionic 1.3.1 and angular 1.5.7.
Any help is greatly appreciated.
Regards,
Lola

+++++++++++++++++++My Controller++++++++++++++++++++
‘use strict’;
angular.module(‘main’)
.controller(‘DataServiceListCtrl’, function ($scope, $rootScope, $ionicLoading, $state,
$localStorage, $stateParams, $translate, $ionicModal, DataService
) {

$scope.items = [];

var isLoadingViewShown = false;
var isItemsViewShown = false;
var isErrorViewShown = false;
var isEmptyViewShown = false;

var isMoreData = false;

var showLoading = function () {

isLoadingViewShown = true;

isItemsViewShown = false;
isErrorViewShown = false;
isEmptyViewShown = false;

$ionicLoading.show({
  content: 'Loading',
  animation: 'fade-in',
  showBackdrop: true,
  maxWidth: 200,
  showDelay: 0
});

};

var showItems = function () {

isItemsViewShown = true;

isLoadingViewShown = false;
isErrorViewShown = false;
isEmptyViewShown = false;

$ionicLoading.hide();

};

var showErrorView = function () {

isErrorViewShown = true;

isItemsViewShown = false;
isLoadingViewShown = false;
isEmptyViewShown = false;

$ionicLoading.hide();

};

var showEmptyView = function () {

isEmptyViewShown = true;

isErrorViewShown = false;
isItemsViewShown = false;
isLoadingViewShown = false;

$ionicLoading.hide();

};

var ensureMoreData = function (length) {
isMoreData = false;
if (length > 0) {
isMoreData = true;
}
};

var setItems = function (items) {
for (var i = 0;i < items.length;i++) {
$scope.items.push(items[i]);
}
};

var setCurrentPage = function (page) {
$scope.params.page = page;
};

var loadItems = function () {
console.log(‘load get called’);

DataService.all($scope.params).then(function (items) {
  ensureMoreData(items.length);
  setCurrentPage($scope.params.page + 1);
  setItems(items);

  if ($scope.items.length === 0) {
    showEmptyView();
  } else {
    showItems();
  }

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

}, function () {
  showErrorView();
  $scope.$broadcast('scroll.refreshComplete');
});

};

$scope.onLoadMore = function () {
console.log(‘load more get called’);
showLoading();
loadItems();
$scope.params.page = 0;
$scope.items = [];
loadItems();
};

$scope.moreDataCanBeLoaded = function () {
return isMoreData;
};

$scope.showLoadingView = function () {
return isLoadingViewShown;
};

$scope.showItems = function () {
return isItemsViewShown;
};

$scope.showErrorView = function () {
return isErrorViewShown;
};

$scope.showEmptyView = function () {
return isEmptyViewShown;
};

$scope.onReload = function () {
showLoading();

$scope.params.page = 0;
$scope.items = [];
loadItems();

};

$scope.$on(’$ionicView.enter’, function (scopes, states) {

if (states.direction === 'forward') {

  showLoading();
  loadData();

}

});
})

+++++++++++++++++++++++++My View++++++++++++++++++++++

Title
<ion-refresher
pulling-text="{{ 'loadingText' | translate }}"
on-refresh="onReload()"></ion-refresher>

  <div class="list" ng-if="showItems()">
    <a class="item item-thumbnail-left item-button-right {{theme}}"
  href="#/app/item/{{item.id}}" ng-repeat="item in items" bindonce>
      <img class="animated fadeIn" ng-src="main/assets/images/itemholder.png"
    actual-src="{{ item.imageThumb.url() }}">
      <h2 bo-bind="$index + 1 + '. ' + item.title"></h2>
      <p bo-text="item.description"></p>
    </a>
  </div>

<ion-infinite-scroll
  on-infinite="onLoadMore()"
  immediate-check="true"
  distance="1%">
</ion-infinite-scroll>

Ion-refresher triggers ion-infinite-scroll's on-infinite method