ion-infinite-scroll not working

[ballmw]

The ion-infinite-scroll is not functioning, it is always present and does not show or hide with an active class.

[ballmw]

It looks like the ion-content directive tries to get an element called 'infinite-scroll' which has been renamed to 'ion-infinite-scroll'.

Similarly the scss doesn't have the correct element in it.

[deflomu]

Pull request here: #674

[adamdbradley]

Thanks for the PR @elm!

[deflomu]

Infinite scrolling is still not working. See http://codepen.io/elm/pen/Becqp for nightly version. loadMore() is only called once. Also the passing of the cb() function to the loadMore() function (in the ionContent directive) is not working.

Also see the test js/ext/angular/test/list-fit.html

[ajoslin]

Sorry about the regressions!

I think while we're here though, we need to change the API for this while we're still in alpha - it doesn't match how pull to refresh works.

How about <ion-content on-infinite-scroll="doSomething()"> - and $scope.doSomething will $broadcast 'scroll.infiniteScrollComplete' when it finishes whatever action it does.

And of course it would need to be documented! We are working on this as well :-)

Thoughts?

[deflomu]

That sounds good. Seems to be consistent with pull to refresh and that's how I would expect it to work.

[ajoslin]

OK, let's wait for @adamdbradley to chime in.

[adamdbradley]

Consistency 👍

[deflomu]

So now infiniteScrollDistance needs to be set on the ion-infinite-scroll element... is it supposed to be like that? If yes, you should remove it from the ionicBind in the ionContent directive. If no, in the ionInfiniteScoll directive you need to remove the binding and change

function maxScroll() {
          var dist = $scope.distance || '1%';
...

to

function maxScroll() {
          var dist = $scope.infiniteScrollDistance || '1%';
...

I think the second one is better because all the attributes regarding scrolling are set on ion-content. Otherwise the onInfiniteScroll attribute is on ion-content but the distance when it's called is somewhere else.

[ajoslin]

Hi Florian,
This is why we really need docs.. My mistake! Can you open a pull request?

Expect some documentation generation to start happening next week :-)
On Feb 27, 2014 4:08 AM, "Florian Mutter" notifications@github.com wrote:

So infiniteScrollDistance now needs to be set on the ion-infinite-scroll
element... is it supposed to be like that? If yes, you should remove it
from the ionicBind in the ionContent directive. If no, in the
ionInfiniteScoll directive you need to remove the binding and change

function maxScroll() {
var dist = $scope.distance || '1%';
...

to

function maxScroll() {
var dist = $scope.infiniteScrollDistance || '1%';
...

I think the second one is better because all the attributes regarding
scrolling are set on ion-content. Otherwise the onInfiniteScroll attribute
is on ion-content but the distance when it's called is somewhere else.

Reply to this email directly or view it on GitHubhttps://github.com//issues/661#issuecomment-36222857
.

[deflomu]

Pull request here: #692

[ChristianWeyer]

So, is there any working example available?

[deflomu]

Here is my codepen example. It's working for me: http://codepen.io/elm/pen/mniqB

Am 02.03.2014 um 23:07 schrieb Christian Weyer notifications@github.com:

So, is there any working example available?

—
Reply to this email directly or view it on GitHub.

[ChristianWeyer]

Thanks for posting your sample. But it looks like this is not infinite scrolling ;)

[deflomu]

Ups. Sorry sent this from my mobile. Here is the example: http://codepen.io/elm/pen/Becqp

Am 03.03.2014 um 00:41 schrieb Christian Weyer notifications@github.com:

Thanks for posting your sample. But it looks like this is not infinite scrolling ;)

—
Reply to this email directly or view it on GitHub.

[ChristianWeyer]

There you go. The scroll function is called very often, actually way to often - do you also see this?

[deflomu]

Is it the same in the code pen? If not: Does this happen when you are at the end of your list where no more data is available? I think that is a missing feature in infinite-scroll. Right now you have to manually check that the loadMore function and stop broadcasting the scroll.infiniteScrollComplete event (so the infinite scroll directive is never set to inactive and thus never calls loadMore again). I think there should be a broadcast like: scroll.infiniteScrollNoDataAvaliable. If that is broadcaster the loadMore function should only be called on "pull up to load more".

[ChristianWeyer]

I am looking exactly at your code in codepen. I added console.log statements and see a high/higher number of calls than is actually needed.

[deflomu]

Can you share the pen with me?

[deflomu]

See #711. This is the bug I described above.

[ChristianWeyer]

Here is the forked pen - I just added console log. Open the dev tools and see the calls there.
http://codepen.io/anon/pen/sEtIh

[deflomu]

The only thing I notice is: If the the list has 10 elements loadMore is called when only one item is left to scroll in the view but if the list has 200 elements loadMore is called when maybe 5 or 6 elements are left to scroll into the view. This is because the loadMore function is called when a certain percentage (default 1% of something) of the list is left to scroll. This is obviously not the same for different sizes of the list. But besides that the loadMore function is called exactly as often as it should be called. I tested this with Safari 7.0.2, Chrome 33.0.1750.117 and Firefox 27.0.1

[ChristianWeyer]

Thx for checking.

[ballmw]

I agree with elm:

In the prior code changes, within the ionContent directive the infinite scroll code is set up like so:

$element.bind('scroll', function(e) {
            if( scrollView && !infiniteStarted && (scrollView.getValues().top > maxScroll() ) ) {
              infiniteStarted = true;
              infiniteScroll.addClass('active');
              var cb = function() {
                scrollView.resize();
                infiniteStarted = false;
                infiniteScroll.removeClass('active');
              };
              $scope.$apply(angular.bind($scope, $scope.onInfiniteScroll, cb));
            }
          });

on angular.bind the 3rd param is the callback. That is passed to my "loadMore" method. I am currently responsible for calling that function:

cb();

If I call that function the scroll will continue to try to load more as scrolling continues.

If I DO NOT call that function the infinite scroll will attempt to load no more.

This is all well and good, but not documented, the ionContent docs say the ion-infinite-scroll should be a function, ie "loadMore()" but they need to be a reference to a function, ie "loadMore".

So we need another way to tell the scroller we're at the bottom, there is no more.

[ajoslin]

Thanks for all the investigation guys, I'll get this down and working asap
tomorrow. Sounds like some inadequate api changes, sorry about the troubles
:-)
On Mar 3, 2014 7:45 PM, "Michael Ball" notifications@github.com wrote:

I agree with elm:

In the prior code changes, within the ionContent directive the infinite
scroll code is set up like so:

$element.bind('scroll', function(e) {
if( scrollView && !infiniteStarted && (scrollView.getValues().top > maxScroll() ) ) {
infiniteStarted = true;
infiniteScroll.addClass('active');
var cb = function() {
scrollView.resize();
infiniteStarted = false;
infiniteScroll.removeClass('active');
};
$scope.$apply(angular.bind($scope, $scope.onInfiniteScroll, cb));
}
});

on angular.bind the 3rd param is the callback. That is passed to my
"loadMore" method. I am currently responsible for calling that function:

cb();

If I call that function the scroll will continue to try to load more as
scrolling continues.

If I DO NOT call that function the infinite scroll will attempt to load no
more.

This is all well and good, but not documented, the ionContent docs say the
ion-infinite-scroll should be a function, ie "loadMore()" but they need to
be a reference to a function, ie "loadMore".

So we need another way to tell the scroller we're at the bottom, there is
no more.

Reply to this email directly or view it on GitHubhttps://github.com//issues/661#issuecomment-36586762
.

[ballmw]

No, thank you for all the effort!

On Mon, Mar 3, 2014 at 10:05 PM, Andy Joslin notifications@github.comwrote:

Thanks for all the investigation guys, I'll get this down and working asap
tomorrow. Sounds like some inadequate api changes, sorry about the troubles
:-)
On Mar 3, 2014 7:45 PM, "Michael Ball" notifications@github.com wrote:

I agree with elm:

In the prior code changes, within the ionContent directive the infinite
scroll code is set up like so:

$element.bind('scroll', function(e) {
if( scrollView && !infiniteStarted && (scrollView.getValues().top >
maxScroll() ) ) {
infiniteStarted = true;
infiniteScroll.addClass('active');
var cb = function() {
scrollView.resize();
infiniteStarted = false;
infiniteScroll.removeClass('active');
};
$scope.$apply(angular.bind($scope, $scope.onInfiniteScroll, cb));
}
});

on angular.bind the 3rd param is the callback. That is passed to my
"loadMore" method. I am currently responsible for calling that function:

cb();

If I call that function the scroll will continue to try to load more as
scrolling continues.

If I DO NOT call that function the infinite scroll will attempt to load
no
more.

This is all well and good, but not documented, the ionContent docs say
the
ion-infinite-scroll should be a function, ie "loadMore()" but they need
to
be a reference to a function, ie "loadMore".

So we need another way to tell the scroller we're at the bottom, there is
no more.

Reply to this email directly or view it on GitHub<
https://github.com/driftyco/ionic/issues/661#issuecomment-36586762>

.

Reply to this email directly or view it on GitHubhttps://github.com//issues/661#issuecomment-36587719
.

[ajoslin]

Hey @ballmw,

So the current version of the docs are actually correct. Although we will be changing things a bit (#720) in beta 1 to make more sense.

Remember the power of angular: simply use an ng-if on your infinite scroller if you wish to load no more. I think this is a great solution because it uses the power of angular without the framework having to do more.

function MyCtrl($scope) {
  $scope.loadMore = function() {
    $scope.noMoreScroll = true;
  };
}

<ion-content on-infinite-scroll="loadMore()">
  <ion-infinite-scroll ng-if="!noMoreScroll"></ion-infinite-scroll>
</ion-content>

[ballmw]

That'll work great, thanks.

[adaptivedev]

I'm still having problems where loadMore() won't be called even though I call

$scope.$broadcast('addGoals.infiniteScrollComplete');

after I receive items, and there is more room on screen and I've set

<ion-infinite-scroll on-infinite="loadMore()" distance="1%">

I've tried with distance 50%, 1000px, etx, with/out ng-if, etc

Sometimes the ion-infinite-scroll works, but if I rearrange some code, it suddenly doesn't, and there's no indication why.

[adaptivedev]

Does it matter from where I broadcast this? Ie, in an indirect callback passed to a function partial, etc?

$scope.$broadcast('scroll.infiniteScrollComplete');

[chrisbenseler]

Same with me @adaptivedev

[robksawyer]

I'm still having issues with infinite scroll. I've implemented what's outlined in the docs, but it's not working as expected. The issue that I'm experiencing is outlined at ion-infinite-scroll keep on calling the method of on-infinite. Anyone, have an example of how it should be implemented?

[CarlLee]

I want to report that if there're more than one <ion-content> in the page, only one will work. Because require in the directive definition will only return the last <ion-content>

[abdulhafeez]

I am facing same issue as @adaptivedev
loadMore is never called.

[babinc]

I too am having issues with ion-infinite-scroll

[Focushift]

@CarlLee thanks for possible explanation why it isn't working, looks like its time to reinvent this directive for complex apps.

[jayzyaj]

I am facing an issue where the ioninfinite event is only called once. So I needed to go to the top of the content and scroll again down to call the event again. Any solutions?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.