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

【问题标题】：Angular and laravel infinte-scroll not working correctlyAngular 和 laravel 无限滚动无法正常工作
【发布时间】：2015-07-15 11:50:53
【问题描述】：

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

这是角部分。这是 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>

【问题讨论】：

尝试将 infinite-scroll-distance 更改为接近 0 的值。现在您正在调用 API，此时元素的底部距离浏览器底部 1000 像素以内。
谢谢，它有帮助。但是当它到达页面底部时如何阻止它加载更多内容？
你不知道 - 该指令旨在在您继续滚动时无限加载更多内容。您的意思是希望它在没有更多内容时停止？
是的，对不起。我的意思是当没有内容时它应该停止加载。

标签： angularjs laravel infinite-scroll

【解决方案1】：

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

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

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

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

阻止指令连续加载更多数据的一种解决方案是在返回的数据为空时设置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.
            }

【讨论】：