为什么ngInfiniteScroll不适用于表？

Question

我正在尝试用<tbody>上的ng- ngInfiniteScroll在我的表上实现重复，但是当我到达页面末尾时，它不会被触发。

<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

该问题与用于滚动计算的视口有关。从包含ng- overflow-y:hidden的容器中删除重复解决了这个问题。

<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