or clone or fork on GitHub

What is Infinite Scrolling?

Infinite scrolling, also known as "endless scrolling," "unpagination," and others, is a technique where additional content for a web page is appended dynamically to the bottom of the page as the user approaches the end of the content. You may have seen this technique on the Facebook timeline or on Pinterest's homepage.

What is ngInfiniteScroll?

ngInfiniteScroll is a directive that you can use to implement infinite scrolling in your AngularJS applications. Simply declare which function to call when the user gets close to the bottom of the content with the directive and the module will take care of the rest. Of course, you can specify several options to ensure that the behavior is just what you're looking for.

How do I use ngInfiniteScroll?

Using ngInfiniteScroll is easy—just follow these simple steps:

  1. Include the ngInfiniteScroll JavaScript source script tag on your page, after the script tags for jQuery and AngularJS (ngInfiniteScroll requires the use of jQuery).

    <script type='text/javascript' src='path/to/jquery.min.js'></script>
    <script type='text/javascript' src='path/to/angular.min.js'></script>
    <script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>

  2. Ensure that your application module (or whatever module is going to use ngInfiniteScroll) specifies infinite-scroll as a dependency.

    angular.module('myApplication', ['infinite-scroll']);

    Note that the module name does not include ng, as that namespace is used by the official Angular module.

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

    <div infinite-scroll="myPagingFunction()" infinite-scroll-distance="3"></div>

    Note that the attribute does not include ng, as that namespace is used by the official Angular module.

  4. That's it! ngInfiniteScroll will call myPagingFunction() any time the bottom of the element approaches the bottom of the browser window. See the API documentation for more information about what attributes are available for use, and take a look at the demos to see ngInfiniteScroll in action.


×
Download Source
Install with Bower

Select a different version: