Infinite scroll in a modal

ionic-v1
1

Is it possible to use the infinite scroll inside a modal?

The function to load more date is in the modal controller, but it is fired in the main controller…

How to do that?

Thanks

2

Since no one answers I’ve opened an issue on Github: link

3

Are you passing the scope that contains the loadMore function to the modal when you instantiate it?

4

Hi @mbuster, this is what I did:

modal html

<script id="modal.html" type="text/ng-template">
  <div class="modal" ng-controller="ModalCtrl">    
    <ion-content>
      <div class="photo" ng-repeat="photo in photosResult">
        <img ng-src="{{ photo.image.thumbnailLink }}">
      </div>
      <ion-infinite-scroll on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
    </ion-content>
  </div>
</script>

in the view controller

$ionicModal.fromTemplateUrl('modal.html', {
  scope: $scope,
  animation: 'slide-in-up',
  focusFirstInput: true
}).then(function(modal) {
  $scope.modal = modal;
});

$scope.openModal = function() {
  $scope.modal.show();
};

in the modal controller

$scope.loadMore = function() {
  console.log('loadMore');
};

But I can see the console.log message also without opening the modal.

5

Hi zelphir,

I had the same issue and fixed it using ng-if attribute on the ion-infinite-scroll directive. It may not be a good solution but seems to be working.

In summary I added a variable data.visible in scope and used it for enabling/disabling infinite scroll when the modal is open or hidden. Let me show you from your example. Hope this helps.

html:

<ion-infinite-scroll ng-if="data.visible" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>

in the view controller:

$scope.data.visible=false;
$ionicModal.fromTemplateUrl('modal.html', {
  scope: $scope,
  animation: 'slide-in-up',
  focusFirstInput: true
}).then(function(modal) {
  $scope.modal = modal;
});

$scope.openModal = function() {
  $scope.data.visible=true;
  $scope.modal.show();
};

$scope.$on('modal.hidden', function () {
      $scope.data.visible=false;
     $scope.data.query='';
});