Question

使用＆＃34;加载远程数据＆＃34;来自ngInfiniteScroll网站的例子我试图实现无限滚动。我的问题;

连续调用函数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 Factory

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

事实证明，当nginfinitescroll正在查看窗口的高度时，你不能在容器滚动时触发vanilla nginfinitescroll触发。

这是SO上答案的链接： angularjs infinite scroll in a container

重复调用ngInfiniteScroll“加载下一页”功能

1 个答案: