Ng-if inside ion-infinite-scroll


#1

I am facing the following weird issue.

I declared infinite scroll this way:

<ion-infinite-scroll ng-if="hasMoreData" distance="10%" on-infinite="loadMoreData()" icon="ion-loading-c"></ion-infinite-scroll>

Everything works until I reach the end of my data, and set $scope.hasMoreData = false.
At this point, correctly, the infinite scroller is removed from the page.

Then I reset it, setting $scope.hasMoreData = true. I expect to be able to use the scroll again… but nothing, it is gone forever (it does not “re-appear”).

Someone had the same issue? Thx!


#2

Works for me.

How do you reset your variable hasMoreData?


#3

In a really simple way, actually: when I click a menu link I just set:

$scope.hasMoreData = true;


#4

Do you use ng-click or are you using a native javascript event?
If you use a native javascript event like onclick or something like this you are jumping out of the angularjs digest cycle.
The result is that your scope changes will not be recognized by angular.


#5

Everything should be called inside angular digest.

I do something like the following (setting the value inside an angular promise):

   $scope.load = function() {
        Service.getData()
            .then(function(data) {
                 $scope.hasMoreData = true;			
             });
    };

Maybe a timeout issue?


#6

Nope i do not think so.
You are getting into the resolve callback, where the variable is set?
And you have to set hasMoreData to true, not false.

I am doing the same for lazy loading of a product list and it works like charme.

greetz.


#7

Just a typo, edited. Well… still I cannot manage to make it work. I am coding something the wrong way, for sure, but… still try to find! :smiley: