Angular 和 laravel 无限滚动无法正常工作

Question

Angular 只需移动滚动条即可加载新页面。不是在它到达底部时。当我向上滚动时，它甚至会加载新帖子。

app.factory('Recipes', function ($http) {
    var Recipes = function () {
        this.recipes = [];
        this.loading = false;
        this.page = 1;
    };

    Recipes.prototype.nextPage = function () {
        var url = 'api/recipes?page=' + this.page;
        if (this.loading) return;
        this.loading = true;
        $http.get(url)
            .success(function (data) {
                console.log(this.page);
                for (var i = 0; i < data.data.length; i++) {
                    this.recipes.push(data.data[i]);
                }
                this.page++;
                this.loading = false;
            }.bind(this));
    };

    return Recipes;
});

app.controller('RecipesCtrl', function ($scope, $http, Recipes) {
    $scope.recipes = new Recipes();
});

这是angular部分。这是 laravel 部分：

Route::group(['prefix' => 'api'], function () {
Route::get('recipes', [
    'as' => 'recipe.all',
    'uses' => 'RecipeController@recipes'
]);});

这是 html 部分：

<div ng-controller="RecipesCtrl">
    <div class="recipe row" infinite-scroll="recipes.nextPage()" infinite-scroll-distance="1"
         infinite-scroll-disabled='recipes.loading'>
        <div ng-repeat="recipe in recipes.recipes | orderBy:sortOrder:sortReverse | limitTo:myLimit">
            ...
        </div>
    </div>
</div>

Answer 1

第一个问题：为什么无限滚动会不断加载更多内容？

infinite-scroll-distance 在您的代码中设置为 1。这意味着当元素在浏览器底部的 1000 像素以内时，指令将获取更多数据。

如果将此值更改为更接近 0 的值，用户将必须进一步滚动才能激活触发器。

第二个问题：当return没有更多内容时，如何防止指令加载更多内容？

阻止指令连续加载更多数据的一种解决方案是在 returned 数据为空时设置 recipes.loading = true;。

因此：

.success(function (data) {
                console.log(this.page);
                for (var i = 0; i < data.data.length; i++) {
                    this.recipes.push(data.data[i]);
                }
                this.page++;
                this.loading = false;
                recipes.loading = true; // This should prevent more code from being loaded.
            }

Angular 和 laravel 无限滚动无法正常工作

Angular and laravel infinte-scroll not working correctly

infinite-scroll

laravel

angularjs