1

I'm using ngInfiniteScroll in AngularJS for a specific container.

Simple example

html

 <div id="containerInfiniteScroll" class="container">
    <div infinite-scroll="next()" infinite-scroll-disabled="disabled" infinite-scroll-distance="1" infinite-scroll-container='"#containerInfiniteScroll"'>
           <div class="row">
                 <div  class="col-xs-12 col-sm-12 col-lg-12">
                    <span  data-ng-repeat="el in elements | limitTo:limit">
                        {{el}}
                    </span>
                </div>
           </div>
    </div>
</div>

css

.container{overflow-y:scroll;}

js

//Varibles... 
$scope.elements = ['element1','element2','element3','...','elementn'];
$scope.limit=50;
$scope.disabled = false;

//Function that infinte-scroll calls:
$scope.next = function(){
        $scope.limit=$scope.limit+50;
        $scope.disabled = $scope.limit>=elements.length;
    };

The ngInfiniteScroll works as expected for contentInfiniteScroll content. Except this case...

  • Don't charge more elements if the scroll-y of the page (not the scroll of the container) is on bottom.

And only don't work in this case...

What am I doing wrong? It's me, or maybe I need to retouch the library ngInfiniteScroll.js ?

Thank you.

Aral Roca
  • 4,205
  • 4
  • 41
  • 67

0 Answers0