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>