3
<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 is only invoked on the beginning when i enter the page, after scrolling down this method is not invoked anymore, why is it?

CSharpBeginner
  • 1,365
  • 4
  • 17
  • 31

2 Answers2

0

loadMore function will not be called if initial page load doesn't fill up the viewport height. Add infinite-scroll-immediate-check="true" - this will force the items to be filled 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>

refer infinite-scroll-immediate-check

Kotwal
  • 1
  • 2
0
<div infinite-scroll="functionName()" infinite-scroll-distance="1" infinite-scroll-container="'#yourContainer'" >

Go to developer tools and find in which container you need the infinite scroll and give the name container.

for documentation check the link http://sroze.github.io/ngInfiniteScroll/documentation.html

Anoop G
  • 1