Skip to content

Latest commit

 

History

History
63 lines (46 loc) · 2.5 KB

infinite-list.md

File metadata and controls

63 lines (46 loc) · 2.5 KB
Raw

infinite-list

infinite-list is a directive of type element used to add support for infinite lists. This directive uses ngInfiniteScroll (more).

How to use it

<div ng-controller="CTRL">
    ...
    <infinite-list load-more-elements='loadMoreElements()'>
        <div ng-repeat="elt in list">...</div>
    </infinite-list>
    ...
</div>

The directive must be used with a "loadMoreElements" function which will fetch/build and add new elements to the list from the ng-repeat in order to provide infinite scrolling.

Configuration

The directive has three optional attributes.

  • infiniteScrollDistance (int)
  • infiniteScrollDisabled (boolean)
  • infiniteScrollImmediateCheck (boolean)
  • scrollInsideContainer (boolean)

If these properties are not defined in the scope, they are set to their default values (1, false, true). See ngInfiniteScroll documentation for properties meaning.

Infinite-list scroll helper

We have built two AngularJS services to support infinite-list scroll action.

  • infiniteScrollHelper service: Collect dedicated materials for structuring displayed elements to user.

  • infiniteListScrollHelperBuilder service: The result of infiniteScrollHelper service. This service manages with flags to determine when the process is disabled, completed or continue to load more elements.

We can customize how many elements per request we want to get or use default value from server. Below is a sample we can use in a frontend component.

function aParticularController(infiniteScrollHelper, ELEMENTS_PER_REQUEST) {
    var self = this
    var DEFAULT_LIMIT = ELEMENTS_PER_REQUEST || 20;
    var options = {
        offset: 0,
        limit: DEFAULT_LIMIT
    }

    function $onInit() {
      self.loadMoreElements = infiniteScrollHelper(self, _loadNextItems, null, DEFAULT_LIMIT);
    }

    function _loadNextItems() {
        //Get data with above options: offset, limit
        //should return an array
    }
}
  • Note:
    • ELEMENTS_PER_REQUEST is a constant that generated by server.
    • By default, limit should be set to ELEMENTS_PER_REQUEST. To make sure infinite scroll work as designed, developers should pass the same limit value on infiniteScrollHelper and _loadNextItems.
    • If you want to use a custom limit value. Please override the default value by passing the custom value as the fourth param when calling infiniteScrollHelper