NgInfiniteScroll loadMethod is called only once
<div >
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
<img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
</div>
$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
$scope.loadMore = function () {
console.log('scroll');
var last = $scope.images[$scope.images.length - 1];
for (var i = 1; i <= 30; i++) {
$scope.images.push(last + i);
}
};
the loadMore function only runs at the beginning when I enter the page, after scrolling, this method is not called anymore, why?
+3
source to share
2 answers
The loadMore function will not be called if the initial page load does not fill the viewport height. Add infin-scroll-instant-check = "true" - this will make the elements fill up on page load.
modified code
<div>
<div infinite-scroll='loadMore()'
infinite-scroll-distance='2'
infinite-scroll-immediate-check="true">
<img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
</div>
</div>
0
source to share
<div infinite-scroll="functionName()" infinite-scroll-distance="1" infinite-scroll-container="'#yourContainer'" >
Go to developer tools and find in which container you need infinite scrolling and specify the container names.
for documentation check link http://sroze.github.io/ngInfiniteScroll/documentation.html
0
source to share