trying infinite scroll with this plugin

[yahyaKacem]

hey, first thanks for this plugin, I'm trying to do an infinite scroll effect with this plugin with ng-repeat, here's a plunker example on how I did it, but it has a bug the loading of additional data happen at the beginning of the load only when I set the offset to a positive number (+1 or 1) the loading happen after the first scroll to that offset and keep happening until last page is loaded, how can I make it so that it load only one page each time it reaches the bottom?

Note: I tried broadcasting the 'scrollpointShouldReset' event but that generated a new error and loaded one extra page.

Thanks, in advance.

[plong0]

ui-scrollpoint-action callback takes element and distance as arguments. When distance < 0 it means your scrollpoint is out of view. I tested with your code and it works with app.loadMore like this:

app.loadMore          = function loadMoreF(elem, distance) {
    if (app.users.isLastPage || distance < 0) {
        return;
    }
    Store.getUsers().then(setUsers, error);
};

[yahyaKacem]

:+1:

[plong0]

Just wanted to note that with version 2.0.0 , there are a couple changes to the ui-scrollpoint-action callback (as noted in PR #11)... the function parameters are reversed, so they are now function(distance, elem, edge)

Also in the case of ui-scrollpoint-edge="bottom" (more generally when edge parameter == 'bottom'), when distance <= 0 it means the scrollpoint has scrolled into view from the bottom. This is more consistent with other functionality where values < 0 are "above" the scroll edge.

A full example of how I set up infinite scrolling with version 2.0.0 is like so:

<div ui-scrollpoint ui-scrollpoint-edge="{bottom:'top'}" ui-scrollpoint-action="loadMore"></div>

$scope.loadMore = function(distance, elem, edge){
    if(distance <= 0){
        // load more content
    }
}

ui-scrollpoint-edge="{bottom:'top'}" means trigger the hit when the top edge of the element hits the bottom edge of the scroll target.

ui-scrollpoint-edge="bottom" means trigger the hit when the bottom edge of the element hits the bottom edge of the scroll target.

Hope this helps, and sorry for the switcheroo on these features, but I think this method makes more sense and ultimately offers more flexibility.