0

使用来自 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 工厂

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;
});
4

1 回答 1

0

事实证明，当容器滚动时，当 nginfinitescroll 正在查看窗口的高度时，您无法触发香草 nginfinitescroll。

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

于 2015-03-19T11:50:06.643 回答