AngularJS and Scroll lazy load directive

Lazy load is a familiar task when you work with web application. For example,  when you scroll your application to the bottom of page, you want to load more data from server side. This will make a better user experience and app performance.

In angularJS, you should create a directive that will catch scroll event and call load more data function in controller when user scroll to bottom of page.

loadMoreData() function is wrote in Controller that will handle task load more data from server and bind to $scope


  • Anh Nguyen

    Nice post bro. I wish I have joined with you in moex :). I’m learning angularjs at the moment. Hope to learn more from you 🙂

    • thanhson1085

      Thanks for your comments. I worked with AngularJS in some projects, it is a excited challenge.

  • mukesh

    This method does not work with firefox browser

  • zapps

    Would be helpful, to newbees like me to angular, if you could write up a snippet showing how this can be used in a controller. Thanks

    • In a controller:$scope.loadMoreData = function() { // call services to get data };

      • zapps

        Thank you.