ngInfiniteScroll - loadMore() method gets called on every mouse-scroll

Question

Solution below on the comments.

Problem: My loadMore() method gets executed on every container's scroll.

Meaning: loadMore() gets executed on each mouse scroll of the parent container (infinite-scroll-parent="true")

Desired result: to get loadMore() execute only when infiniteScrollDistance meets its conditions, instead of any tinny scroll I do.

My code is highly inspired by the demo_basic & demo_async.

My app is a photos gallery. I load the photos by ajax call, and populate them into a thumbnail directive repeater. I disable ng-Infinite-Scroll on controller initialization, and enable it on callback success.

    <div class="thumbnails grid__item page--content">
            <div id="gallery" class="unstyled-list" 
                    infinite-scroll='loadMore()' 
                    infinite-scroll-disabled='album.busy' 
                    infinite-scroll-parent="true" 
                    infinite-scroll-immediate-check="false" 
                    infinite-scroll-distance='2'>
                    <my-photo-directive ng-repeat="photo in photos"></my-photo-directive>
            </div>
    </div>

My coffee code has no surprises. It's logic is unimportant, because if I place a simple console.log, the problem still occurs.....

    $scope.album.busy = true
    $scope.loadMore = ->
            $scope.$apply ->
                    $scope.album.busy = true
            console.log('loadMore() been executed here')

My thumbnail directive is the same. No surprises, moment last photos gets populated onto the repeater, I enable the component.

    app.directive 'myPhotoDirective', ['$window', ($window) ->
        return {} =
            ....
            link: (scope, element, attrs) ->
                if scope.$last
                    scope.album.busy = false

I got no idea what i'm missing or doing wrong. I hope someone will be here to help me.

Thank you.

Answer 1

I have solved my problem.

One of foundation properties that NIS (ngInfiniteScroll) measure, are $containerand $elem

1. $container is the parent of the scrolled elements Element.
2. $elem is the Element that contain the scrolled elements.

Example

<$container> <!-- can be a div -->
    <$elem> <!-- can be a list -->
        <photo/>
        <photo/>
        <photo/>
        <photo/>
    </$elem>
</$container>

What NIS is trying to do, is to calculate on each mouse scroll, if enabled, the relation between these two elements, and check if $elem is taller than $container, and then scroll down or not. (it also check other properties like - distance, immediate-check & disabled).

So this relation between this two fundamental elements, is crucial for the understanding & debugging of NIS.

So my problem was exactly that - The $container and $elem were equal at their height.
I had fixed css height values (100%) on both elements (mainly cause I read in the documentation that I must pass height), and by mistake I fixed $elemwhich was totally wrong.

Secondly - infinite-scroll-distance can cause this to happen as well. If the value that you're setting is high (let's say 2), and your loadMore() method don't populate enough items, even if you disable runtime of the method, than you will get infinite loadmore() executions.