infiniteScroll (directive in module infinite-scroll)


infiniteScroll allows you to specify behavior when the bottom of an element nears the bottom of the browser window.

<ANY infinite-scroll='{expression}'
     [infinite-scroll-container='{HTMLElement | [] | string}']

Loading the Module

The infiniteScroll directive lives inside the infinite-scroll module; to get access to it, ensure that your application's own module includes infinite-scroll as a dependency (in addition to any other dependencies):

var myApp = angular.module('myApp', ['infinite-scroll']);

Throttling scroll events

Scroll events can be triggered very frequently, which can hurt performance and make scrolling appear jerky. To mitigate this, infiniteScroll can be configured to process scroll events a maximum of once every x milliseconds:

// you might call this after your module initalization
angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 250)

Triggering the scroll handler manually

If your items can change their height or be hidden — for instance in a filtered list — it is possible for your list to get shorter and require repopulating without the user triggering a scroll event. In this case, you can use the infinite-scroll-listen-for-event attribute. Later, when you need to trigger the scroll check, fire the corresponding event. For example:

<div infinite-scroll="addMoreItems()" infinite-scroll-listen-for-event="list:filtered">

And then, when you need to trigger the check, for instance in your controller:


Typical Usage

Typically, you will use the infiniteScroll directive on an element that contains another element that uses ngRepeat to show a series of elements based on an array (or object); the expression you pass in to the infinite-scroll attribute will generally add additional elements to the array, expanding the ngRepeat.

<div infinite-scroll="addMoreItems()">
  <div ng-repeat="item in items">Item number {{$index}}: {{$item}}</div>

For an example of how you can implement this pattern, see the demos.

Download Source
Install with Bower

Select a different version: