AngularJS无限滚动调用函数即使向上滚动答案

【问题标题】：AngularJS Infinite scroll calls function even on scrolling upAngularJS无限滚动调用函数即使向上滚动
【发布时间】：2014-05-15 14:04:23
【问题描述】：

我正在使用来自http://binarymuse.github.io/ngInfiniteScroll v1.1.0 的无限滚动。我有一个表格，其内容将在用户向下滚动时动态加载。

我在plunk 中做了同样的事情，它将数据推送到显示在 div 内的数组中，并且按预期工作。

当我尝试在其他页面上执行相同操作时，不仅会在向下滚动时调用 showMore() 函数，还会在向上滚动时调用。这里是表的结构。

<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>

我不明白为什么即使向上滚动也会调用showMore() 函数。和表结构有关系吗？

【问题讨论】：

首先，div 在tbody 中做什么并包装tr？这是无效的HTML 标记。
已修复，现在 div 在表格标签之外，类似于<div infinite-scroll="showMore()" infinite-scroll-distance="3" infinite-scroll-disabled='infiniteScrollDisabled'>... <table>... </table> </div> 向上滚动时仍调用showMore() 函数。

标签： javascript angularjs infinite-scroll

【解决方案1】：

解决方法是移动 <div infinite-scroll="showMore()" infinite-scroll-distance="3" infinite-scroll-disabled='infiniteScrollDisabled'>

<table>.....</table> 标签之外。

【讨论】：

【解决方案2】：

我在 github 上发现了这个问题，它为我解决了这个问题 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>

信用：本杰明W福克斯

这个 jsFiddle 演示了这一点（以及过滤等）https://jsfiddle.net/lisapfisterer/Lu4sbxps/

【讨论】：