2

I am trying to implement infinite scroll for my angularjs app. To get acquainted with the usage of ngInfiniteScroll

I am using same example given in their demos

page. It is not working for me,

profile.ejs:

    <script  src='../controllers/jquery.min.js'></script>
    <script  src='../controllers/angular.min.js'></script>
    <script  src='../controllers/ng-infinite-scroll.min.js'></script>

    <!-- some other code -->

        <ul infinite-scroll='loadMore()' infinite-scroll-distance='1' >
           <div ng-repeat="item in images">Item number {{$index}}: {{$item}}</div>
        </ul>

<!-- some other code -->

profileController.js

$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];

$scope.loadMore = function() {
    alert("called");
    var last = $scope.images[$scope.images.length - 1];
    for(var i = 1; i <= 2; i++) {
      $scope.images.push(last + i);
    }

  };

The alert("called") is not being called on browser scroll. Can anyone help me where I am wrong or how can I achieve infinite scroll?

Suresh Kota
  • 187
  • 4
  • 15
  • You're probably missing something in your module and controller declaration, make sure you follow all the steps in this link: http://4dev.tech/2015/08/tutorial-implementing-infinite-scroll-with-angularjs-and-nginfinitescroll/ – Leonardo Jines Aug 18 '15 at 23:47

1 Answers1

0

How did you defined your angular module and controller ?

=> you must inject "infinite-scroll" dependecy in your module.
=> you must defined "infiniteScroll" controller in your module.

"loadmore" function had to be in the "infiniteScroll" controller.

nonozor
  • 761
  • 1
  • 12
  • 23