ngInfiniteScroll - loadMore() method gets called o

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

Put a lot of time just to figure it out. For me infinite scroll's method was called infinitely, so i did a bit of research & came to conclusion that it was happening beacause the height of my "div" for infinite scroll in my code was 0, was not increasing at all, so it was thinking all the time that the user was at the end of the page. So the solution for me was to add a "clearfix" html class to the next element of the "div" for infinite scroll.