ion-infinite-scroll not working

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

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.

Pull request here: #674

Thanks for the PR @elm!

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

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?

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

@adamdbradley

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

Consistency 👍

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
.

@ballmw

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>

That'll work great, thanks.

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.

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

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

@adaptivedev

Same with me @adaptivedev

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?

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>

@adaptivedev

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

I too am having issues with ion-infinite-scroll

@CarlLee

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

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?

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.

Navigation Menu

Repository navigation

ion-infinite-scroll not working #661

19 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ion-infinite-scroll not working #661

Description

Activity

ballmw commented on Feb 21, 2014

deflomu commented on Feb 25, 2014

adamdbradley commented on Feb 25, 2014

deflomu commented on Feb 26, 2014

ajoslin commented on Feb 26, 2014

deflomu commented on Feb 26, 2014

ajoslin commented on Feb 26, 2014

adamdbradley commented on Feb 26, 2014

19 remaining items

ballmw commented on Mar 4, 2014

ajoslin commented on Mar 4, 2014

ballmw commented on Mar 4, 2014

adaptivedev commented on Dec 31, 2014

adaptivedev commented on Jan 8, 2015

chrisbenseler commented on Jun 24, 2015

robksawyer commented on Nov 6, 2015

CarlLee commented on Dec 11, 2015

abdulhafeez commented on Feb 6, 2016

babinc commented on Jun 30, 2016

Focushift commented on Aug 18, 2016

jayzyaj commented on Jul 24, 2018

ionitron-bot commented on Sep 1, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions