Question

15

ngInfiniteScroll not working

rated 0 times [ 21] [ 6] / answers: 1 / hits: 17650 / 9 Years ago, mon, november 30, 2015, 12:00:00

I am trying to make ngInfiniteScroll work but in vain - Plunker. Scroll event is only triggered on page load, after that nothing seems to trigger it. Can anyone please shed some light.

I tried various combinations, none worked:

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-container='#list-wrapper' 



infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-parent



infinite-scroll='loadMore()' infinite-scroll-distance='2'

HTML:

<body ng-app=app ng-controller=listController>

      <div id=list-wrapper>

          <div class=list infinite-scroll='loadMore()' 

        infinite-scroll-distance='2' 

        infinite-scroll-container='#list-wrapper'>

            <div class=header>



            </div>



            <div class=list-table >

                <table class=table>

                    <tbody>

                        <tr ng-repeat=item in infiniteList>

                            <td style=width:100%>

                                <div>{{item}}</div>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

            <div style='clear: both;'></div>

            </div>

      </div>

JS:

var app = angular.module(app, ['infinite-scroll']);



app.controller('listController', ['$scope','$http', function ($scope,$http) {

    $scope.infiniteList = [];

    $scope.incr = 1;



    $scope.loadMore = function(){

      console.log(scroll);

        for(var i = 0; i< 30; i++){

            $scope.infiniteList.push(Item  + $scope.incr);

            $scope.incr +=1;

        }

    };



}]);

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deiong

Add To Favorites

Follow

Total Points: 15

Total Questions: 103

Total Answers: 99

Location: Sudan

Member since Thu, May 7, 2020

4 Years ago

answered 9 Years ago martina · Accepted Answer

EDIT: you are using the latest stable version of ngInfinite Scroll, which does not have the -container and -parent methods, i have update the plunker with the develpoment ngInfiniteScroll.js, now you can see the working code here:

http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview

OLD:

ngInfiniteScroll will call myPagingFunction() any time the bottom of
the element approaches the bottom of the browser window

so, if you change your css and remove the max-height, so that the list covers the page,you will see that the infinitescroll is working when user scrolls past the page.

#list-wrapper{

    //max-height: 400px;

    overflow-y: scroll;



    margin-top: 20px;

    border: solid 1px black;

}

http://plnkr.co/edit/aaUWnnKoH9kXGFx70U2J?p=preview

also see: angularjs infinite scroll in a container