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.