lazy scroll – infinite scrolling angularjs plugin

What is lazy scrolling?

lazy-scroll is a angularjs directive for infinite scrolling. Instead of click pagination links and   going to next page , this will help to load data on scrolling as you can see in facebook .lazy-scroll will work with out jquery .

Download lazy-scroll

minified version      |     uncompressed version 

What you have to do to implement on angularjs project?

lazy-scroll is a a simple directive for angularjs application. Simply we have to call the function which you want to call for pagination in lazy-scroll attribute.

It will magically load data and append into variable when user reaching bottom of page. There are API also available to controll the behaviour.

Just see some demo samples.

 Check out some Demo

demo with explanation can see here

How do I use in my project?

you can download the minified version   or you can use the cdn and follow simple 3 steps

 

Step 1 :

Add script at bottom of page after angularjs

<script src="path-to-script/angularjs.min.js"></script>
<script src="path-to-script/lazy-scroll.min.js"></script>
Step 2:

Ensure that your application module specifies lazy-scroll as a dependency.

var app = angular.module("yourModule",['lazy-scroll']);
Step 3:

Use the directive by specifying an lazy-scroll attribute on an element.

<div lazy-scroll="paginationFuntion()" lazy-scroll-trigger="80" >

That is it ! it will work like a magic

What is next?

Check our API from here 

See some demo and implement 🙂

16,166 total views, 12 views today

11 Comments

  1. Tanks for giving as directive

  2. Thanks, works for me!!!

  3. This website was… how do you say it? Relevant!! Finally I’ve found something that helped me.
    Kudos!

  4. Wow, this article is fastidious.

  5. Very cool! Nice simple directive, will definitely be using this at some point. Thanks!

  6. very good alternative to ladda buttons, ur API really rocks and the directive is pretty well shown…Keep going…..

  7. Hi ! Nice work man, thank you for sharing 😉

  8. Appreciate you sharing, great forum post.Really thank you! Fantastic.

  9. In the below code what is problem?? of one scroll the ajax request have called n times

    // Video Get ng
    app.controller(‘videoController’, function($scope,$http,$attrs) {
    var reachedLast = false;
    $scope.testData = [];
    $scope.loadmore = “Loading more data…”;
    $scope.limhead = 100;
    $scope.limexert = 200;

    cat_slug = “video”;
    cat_name = $attrs.catname;
    NextpageNumber = 3;//next page is made it zeero on starting
    $scope.listData = function() {
    if(reachedLast)
    return false;

    $scope.url = ‘http://localhost/nif-portal-v1/ajx/ajxpostsub/load_more_posttyp/’+ cat_slug +’/’+ NextpageNumber;
    $http.post($scope.url, {“data”: $scope.keywords}).success(function(data, status) {

    $scope.status = status;
    $scope.data = data;
    var currentpage = NextpageNumber;//taking current pagenumber
    var lastpage = data.total_data; //setting last page number
    NextpageNumber = NextpageNumber + 3;

    if((currentpage == NextpageNumber)){
    return false;
    }

    if((currentpage >= lastpage)){
    //reached at the bottom
    reachedLast = true;
    $scope.loadmore = “Reached at bottom”;
    return false;
    //$scope.$apply();

    }
    // $scope.tag_line(data.posts);
    $scope.testData = $scope.testData.concat(data.posts);

    }).error(function(data, status) {
    $scope.data = data || “Request failed”;
    $scope.status = status;
    });
    };
    $scope.tag_line = function(pst){
    console.log(pst);
    console.log(“Called me lol”);
    }
    $scope.listData();// loading initial content

    });

  10. Amazing! Its in fact amazing piece of writing, I have got
    much clear idea about from this paragraph.

Leave a Reply

Your email address will not be published.

*

© 2017 shabeeb Blog

Theme by Anders NorénUp ↑