How to use infinite-scroll in modal-view

@Lnabergoi wrote:

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

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

In the modal the Event:

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

is never called

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>

Posts: 3

Participants: 2

Read full topic