AngularJS Infinite scroll calls function even on scrolling up

Question

I am using infinite scroll from http://binarymuse.github.io/ngInfiniteScroll v1.1.0. I have a table whose contents will be loaded dynamically as the user scrolls down.

I did the same thing in this plunk which pushes data inside the array which is displayed inside a div and it works fine as expected.

When I tried to do the same on other page, showMore() function is called not only on scrolling down but also when scrolling up. Here the structure of the table.

<table>
    <thead>
        <tr>
            <th>Some heading</th>       
            <th>Some other heading</th>
        </tr>
    </thead>
    <tbody>
      <div infinite-scroll="showMore()" infinite-scroll-distance="3" infinite-scroll-disabled='infiniteScrollDisabled'>
        <tr ng-repeat="r in report">
            <td>{{$index}}</td>    
            <td">{{r.someData}}</td>
        </tr>
      </div>
    </tbody>
</table>

I dont understand why showMore() function is called even on scrolling up. Has it anything to do with the table structure ?

Answer 1

The solution is to move <div infinite-scroll="showMore()" infinite-scroll-distance="3" infinite-scroll-disabled='infiniteScrollDisabled'>

outside the <table>.....</table> tags.

Answer 2

I found this issue on github and it solved it for me https://github.com/sroze/ngInfiniteScroll/issues/157

<div class="constrained" ng-controller="MyCtrl">
    <table infinite-scroll="increaseLimit()" infinite-scroll-container='".constrained"'>
        <tr ng-repeat="item in items | limitTo:barLimit">
            <td>Number</td>
            <td>{{item.number}}</td>
        </tr>
    </table>
</div>

credit: BenjaminWFox

This jsFiddle demonstrates this (along with filtering etc) https://jsfiddle.net/lisapfisterer/Lu4sbxps/