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

Without a Plunker to see the actual code I'll direct you right to the ngInfiniteScroll FAQ:

Why is ngInfiniteScroll triggering my expression on every single scroll event?

The infiniteScroll directive uses the height of the element that it's attached to in order to determine how close to the bottom of the window it is. In some cases, the browser can report a height of 0, which causes this behavior. Usually, this is due to a container element that only contains floated children. The simplest way to fix this problem is to add a "spacer" element to the bottom of the container (something like <div style='clear: both;'></div>); see this StackOverflow question and its associated answers for more details.

Answer 2

Let me add my two cents, had exact same problem, different solution! I have been debugging ng-infinite-scroll all day. At one point, I realized that javascript reports $(window).height() == $(document).height() which makes no sense whatsoever.

I did a bit googling, and it happens when you're missing DOCTYPE: jquery $(window).height() is returning the document height

But, that was not enough! My DOCTYPE was eaten by browser, at one point. You can read further: Too big number of $(window).height() on wordpress