0

ngInfiniteScroll Web サイトの「リモート データの読み込み」の例を使用して、無限スクロールを実装しようとしました。私の問題;

この関数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無限スクロール

于 2015-03-19T11:50:06.643 に答える