ngInfiniteScroll "load next page" 函数被重复调用

Question

使用 ngInfiniteScroll 网站上的 "loading remote data" 示例，我尝试实现无限滚动。我的问题；

函数 nextPage() 被连续调用，直到没有更多记录可供加载（由 SQL 查询中的偏移值控制）。

我很迷茫，因此请多多指教。

提前致谢。

HTML

<tbody>
    <div id="infinite_scroll" infinite-scroll='visits.nextPage()' infinite-scroll-disabled='visits.busy' infinite-scroll-distance='1'>
        <tr ng-repeat="visit in visits.items" ng-class="{active: visit.uuid == data.detailItem.uuid}" ng-click="openDetailItem(visit.uuid)">
            <td>{{visit.details.name}}</td>
            <td>{{visit.created_at}}</td>
        </tr>
    </div>
</tbody>

Javascript - AngularJs 工厂

angular.module('app').factory('Visits', function(VisitResource) {

// new visits object
var Visits = function () {
    this.items = [];
    this.busy = false;
    this.offset = 0;
};

Visits.prototype.nextPage = function () {

    // busy - stop
    if (this.busy == true) {
        // DEBUG
        console.log('busy test 1.1: ' + this.busy);
        return;
    } else {
        // DEBUG
        console.log('busy test 1.2: ' + this.busy);
    }

    // busy now
    this.busy = true;

    VisitResource.getVisitations({
        limit: 500,
        offset: this.offset
    }, function (response) {

        // stop loading if no data returned
        if(response.data.length == 0) {
            // DEBUG
            console.log('busy test 2: ' + this.busy);
            return;
        } else {
            // DEBUG
            console.log('Payload: ' + response.data.length);
        }

        var _this = this;
        angular.forEach(response.data, function (a_visit) {
            _this.items.push(a_visit);
        });

        // set the last acquired record value
        this.offset = this.items[this.items.length - 1].id;
        // not busy
        this.busy = false;
    }.bind(this));
};

return Visits;
});

Answer 1

事实证明，当容器滚动时，您无法触发 vanilla nginfinitescroll，因为 nginfinitescroll 正在查看 window 的高度。

这里是 link 对 SO 的回答： angularjs infinite scroll in a container

ngInfiniteScroll "load next page" 函数被重复调用

ngInfiniteScroll "load next page" function being called repeatedly

javascript

angularjs

nginfinitescroll