CODEWITHSUNDEEP
angularjslaravelinfinite-scroll
Eligijus
Eligijus

Reputation: 643

Angular and laravel infinte-scroll not working correctly

Angular loads new pages just by moving the scroll bar. Not when it reaches the bottom. It even loads new posts when i scroll up.

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

This is the angular part. This is the laravel part:

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

And this is the html part:

<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>

Upvotes: 1

Views: 603

Answers (1)

Nicklas Kevin Frank
Nicklas Kevin Frank

Reputation: 6337

First Problem: Why does infinite-scroll load more content constantly?

infinite-scroll-distance is set to 1 in your code. This means that when the element is within 1000 pixels of the browsers bottom the directive will fetch more data.

If you change this to a value closer to 0, the user will have to scroll further for the trigger to get activated.

Second Problem: How do I prevent the directive from loading more content, when there is no more content to return?

One solution to stopping the directive from continuously loading more data is by setting the recipes.loading = true; when the returned data is empty.

As such:

.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.
            }

Upvotes: 1

Related Questions