Почему ngInfiniteScroll не работает для таблиц?

Question

Я пытаюсь реализовать ngInfiniteScroll на моей таблице с ng-repeat на <tbody> Однако он не срабатывает, когда я добираюсь до конца страницы.

<div infinite-scroll="list.getMoreItems()"> 
    <table md-table md-row-select> 
     <thead md-head> 
      <tr md-row> 
       <th md-column><span>Id</span></th> 
       <th md-column><span>Item</span></th> 
      </tr> 
     </thead> 
     <tbody md-body ng-repeat="data in list.items"> 
      <tr md-row><td md-cell>{{data.title}}</td></tr> 
      <tr md-row><td md-cell>Click here </td></tr> 
     </tbody> 
    </table> 
</div> 

Мои getMoreItems() ничего не делает больше, чем бросить предупреждение сейчас.

ngInfiniteScroll настроен правильно, поскольку он выполняет getMoreItems() при загрузке страницы, но никогда после этого.

Answer 1

Этот вопрос был с видовом прокручивать расчет. Удаление overflow-y:hidden из контейнера, содержащего ng-repeat, решило проблему.

<div id="holdList" infinite-scroll="list.getMoreItems()"> 
    <table md-table md-row-select> 
     <thead md-head> 
      <tr md-row> 
       <th md-column><span>Id</span></th> 
       <th md-column><span>Item</span></th> 
      </tr> 
     </thead> 
     <tbody md-body ng-repeat="data in list.items"> 
      <tr md-row><td md-cell>{{data.title}}</td></tr> 
      <tr md-row><td md-cell>Click here </td></tr> 
     </tbody> 
    </table> 
</div> 


#holdList 
{ 
    height: 100%; 
    overflow: auto; 
} 

Answer 2

В вашем HTML:

<tbody md-body ng-repeat="data in list.items | limitTo:barLimit"> 

И в вашем методе getMoreItems():

$scope.barLimit = 100; 
$scope.getMoreItems = function() { 
    $scope.barLimit += 50; 
} 

На основе этого working example