How to use infinite-scroll in modal-view


#1

Im not able to use a infinite-scroll inside a modal-view

The same code working if the view is not working in modal.

controler.js

$ionicModal.fromTemplateUrl(‘templates/modals/imagesRankingSpot.html’, {

    scope: $scope,
    animation: 'slide-in-up'
}).then(function(modal) {
    $scope.rankingSpotCtrl = modal;
});


$scope.openModalRanking = function() {

    $scope.imagesUserSpotPage=1;
    SpotImageUser.getbySpotid({idSpot : $scope.spot._id, _page: $scope.imagesUserSpotPage }, function(dataSpotImageUser){
        imagesUserSpot=dataSpotImageUser._items;
        for (var i=0; i< imagesUserSpot.length; i++){
                
            imagesUserSpot[i].numberLikes = imagesUserSpot[i].likeProfile.length;
                
            //mark as I like
            Like = imagesUserSpot[i].likeProfile.indexOf($rootScope.profileUser._id);
            if ( Like!== -1){imagesUserSpot[i].Like = true;
            }else {imagesUserSpot[i].Like = false;}

        };
        $scope.imagesUserSpotTotal=dataSpotImageUser._meta.total;
        $scope.imagesUserSpotMaxPage=dataSpotImageUser._meta.max_results;
        $scope.imagesUserSpot=imagesUserSpot;
        scope.rankingSpotCtrl.show();
    });

};`

rankingSpot.js

angular.module('starter.controllers').controller('RankingSpotCtrl', function($q,$scope, $rootScope, $stateParams,$location,$ionicModal,$ionicSlideBoxDelegate,SpotResultsServi  ce,SpotHelper,Spot,SpotComment, ArrayHelper, Pro   file, SpotImageUser) {

$scope.c   loseModalRanking = function() {
    $scope.rankingSpotCtrl.hide();
 };

$scope.loadMoreDataimagesUserSpot = function() {
    if ($scope.imagesUserSpotPage * $scope.imagesUserSpotMaxPage < $scope.imagesUserSpotTotal){
        $scope.imagesUserSpotPage++;        
        // search spot by followers TO DO
        var imagesUserSpot =[];
        loadMoreImagesUserSpot().then(function(dataSpotImageUser) {
            imagesUserSpot=dataSpotImageUser._items;
                for (var i=0; i< imagesUserSpot.length; i++){
                        
                    imagesUserSpot[i].numberLikes = imagesUserSpot[i].likeProfile.length;
                        
                    //mark as I like
                    Like = imagesUserSpot[i].likeProfile.indexOf($rootScope.profileUser._id);
                    if ( Like!== -1){imagesUserSpot[i].Like = true;
                    }else {imagesUserSpot[i].Like = false;}

                };
            $scope.imagesUserSpot=_.concat($scope.imagesUserSpot,imagesUserSpot);
            $scope.$broadcast('scroll.infiniteScrollComplete');
            $scope.$broadcast('scroll.resize');

        });
     
    }

};
$scope.$on('$stateChangeSuccess', function() {
  $scope.loadMoreDataimagesUserSpot();
});


loadMoreImagesUserSpot=  function() {
    var deferred = $q.defer();
    SpotImageUser.getbySpotid({idSpot : $scope.spot._id, _page: $scope.imagesUserSpotPage }, function(data) {
      deferred.resolve(data);
    }, function() {
      deferred.reject();
    });

    return deferred.promise;
};});

imageRanking.html

<ion-modal-view view-title="{{'spot_ranking_pics' | translate}}" ng-controller="RankingSpotCtrl">
   <ion-header-bar class="bar-dark">
      <h1 class="title">{{'spot_ranking_pics' | translate}}</h1>
      <div class="buttons">
         <button class="button button-clear" ng-click="closeModalRanking()">{{'close' | translate}}</button>
      </div>
    </ion-header-bar>
    <ion-content >
      <ion-list>
         <ion-item ng-repeat= "image in imagesUserSpot | orderBy: '-numberLikes' ">
          <div class="card">
             <div class="headerRanking item">
                <i class="icon ion-trophy energized iconsRanking"  ng-show="$index==0"></i>
                <i class="icon ion-ribbon-a silver iconsRanking"  ng-show="$index==1"></i>
                <i class="icon ion-ribbon-b bronze iconsRanking"  ng-show="$index==2"></i>
                <h2 style="padding-left:10px " class="medium">{{$index+1}}</h2>
             
                 <div class="item item-avatar headerRanking" ng-click ="go('app/profile/{{image.idProfile._id}}');closeModalRanking()" >
                    <img ng-src="data:image/jpeg;base64,{{image.idProfile.idImageProfile[0].image}}">
                    <h2 class="medium">{{image.idProfile.name}}</h2>
                 </div>
             </div>
             <a class="item item-thumbnail-left" >
                <img ng-src="data:image/jpeg;base64,{{image.image}}" height='100' width='200' ng-click="">
                <b class="tab-item headerRanking" ng-click="addLikePic(image._id)">
                  <span class="badge badge-assertive">{{image.numberLikes}}</span>
                  <i style="padding-left:10px"class="icon assertive ion-thumbsup" ng-if="image.Like"></i>
                  <i style="padding-left:10px" class="icon subdued ion-thumbsup" ng-if="!image.Like"></i>
                  <h2 style="padding-left:10px"> {{'like' | translate}}</h2>
                </b>
             </a>
          </div>
        </ion-item>
    </ion-list>
      <ion-infinite-scroll
        distance="5%"
        icon="ion-loading-c"
        on-infinite="loadMoreDataimagesUserSpot()">
      </ion-infinite-scroll>
   </ion-content>
</ion-modal-view>

#2

By opening a modal, your state has not changed, so the event does not fire. Trying to go through your code, but it looks like you want to call it right after the Modal is opened, correct?


#3

Hi,

What im tring to do is:
Load same data when the modal is open from the main controler, then use the infinite-scroll for load more, using the modal controler.
Thanks


#4

So, does the data show when the modal comes up at all?
Take the $scope.loadMoreDataimagesUserSpot() out of the event handler. This way it is automatically called when the controller is started.

//$scope.$on('$stateChangeSuccess', function() {
  $scope.loadMoreDataimagesUserSpot();
//});

#5

Here is some of my code. I use a boolean to check and see if more data can be loaded and use an ng-if in the infinite-scroll. This is what I found to work the best and that others before me had done to trigger the initial data request.

	var offset = 0,
	    limit = 20;

	$scope.requests = [];	
	$scope.moreCanBeLoaded = true;	
        $scope.$broadcast('scroll.infiniteScrollComplete');	

	$scope.loadMoreRequests = function () {
		offset = $scope.requests.length;
		
		RequestData.getRequests(offset, limit).then( function (data) {
			if (data.requests != '' ){
				Array.prototype.push.apply($scope.requests, data.requests);
				$scope.$broadcast('scroll.infiniteScrollComplete');
			} else {
				$scope.moreCanBeLoaded = false;
				$scope.$broadcast('scroll.infiniteScrollComplete');
			}
			
		}, function () {
			$scope.$broadcast('scroll.infiniteScrollComplete');
			$scope.moreCanBeLoaded = false;
		});

	};

<ion-infinite-scroll ng-if="moreCanBeLoaded"
				on-infinite="loadMoreRequests()"
				spinner="bubbles"
				distance="10%">
		</ion-infinite-scroll>

#6

Thank you very much for your time. I try to change the controller but it still dont working.
The problem is not in the first data loaded.

The problem is when i try to scroll till the end of the first data loaded the:

  <ion-infinite-scroll
    distance="5%"
    icon="ion-loading-c"
    on-infinite="loadMoreDataimagesUserSpot()">
  </ion-infinite-scroll>
   </ion-content>
</ion-modal-view>

never call the function loadMoreDataimagesUserSpot(), this function is placed inside the modal controller:

<ion-modal-view view-title="{{'spot_ranking_pics' | translate}}" ng-controller="RankingSpotCtrl">

$scope.loadMoreDataimagesUserSpot = function() {
    if ($scope.imagesUserSpotPage * $scope.imagesUserSpotMaxPage < $scope.imagesUserSpotTotal){
        $scope.imagesUserSpotPage++;        
        // search spot by followers TO DO
        var imagesUserSpot =[];
        loadMoreImagesUserSpot().then(function(dataSpotImageUser) {
            imagesUserSpot=dataSpotImageUser._items;
                for (var i=0; i< imagesUserSpot.length; i++){
                        
                    imagesUserSpot[i].numberLikes = imagesUserSpot[i].likeProfile.length;
                        
                    //mark as I like
                    Like = imagesUserSpot[i].likeProfile.indexOf($rootScope.profileUser._id);
                    if ( Like!== -1){imagesUserSpot[i].Like = true;
                    }else {imagesUserSpot[i].Like = false;}
                };
            $scope.imagesUserSpot=_.concat($scope.imagesUserSpot,imagesUserSpot);
            $scope.$broadcast('scroll.infiniteScrollComplete');
            $scope.$broadcast('scroll.resize');
        });
     
    }

Thanks


#7

If you know the total length of your data and you know whats been loaded, you can do like I showed and use the ng-if with a boolean to trigger the infinite-scroll and let it know there is more to be loaded.

for a test, just put an ng-if=“loadMoreData”

  <ion-infinite-scroll
    ng-if="loadMoreData"
    distance="5%"
    icon="ion-loading-c"
    on-infinite="loadMoreDataimagesUserSpot()">
  </ion-infinite-scroll>
   </ion-content>
</ion-modal-view>

and then put

 $scope.loadMoreData = true;

at the beginning of the modal controller.

If that works, then all you need to do is set to false when you have loaded all the data.


#8

Hi, I could fixed it.
The problem was when I just open the modal I need to resize the scroll with:
$scope.$broadcast('scroll.resize');

Thanks for your help.

Luis Nabergoi