Use an infinite scroll directive

The 'sfInfiniteScroll' directive provides functionality for infinite scrolling through the items, as an alternative to paging. The implementation is very simple and solves only the core problem, which is to invoke a delegate when more data is needed. The idea of this directive is not to provide eye-candy features, such as loaders etc.

Usage:

The sfInfiniteScroll is a directive with an isolated scope that is defined in a module with the same name (sfInfiniteScroll).

Markup:

   <ul sf-infinite-scroll="loadMore()" style="height: 100px;">
      <li ng-repeat="item in items">{{item}}</li>
   </ul>

Angular JavaScript:

   scope.loadMore = function() {
      scope.items = scope.items.concat([1, 2, 3, 4, 5]);
   };

This example adds 5 new elements to the items collection when the element that has infinite scroll is scrolled to the bottom. Height of the element has to be limited in order for a scroll to appear.

Adding infinite scroll in a designer view:

For AngularJs to link the sfInfiniteScroll directive in your custom designer view the script of the directive has to be loaded and a dependency to the module has to be added.

1. In your DesignerView.YourView.json file you have to add a scripts array. The content of the file should be similar to:

   {
      "priority": 1,
      "scripts": [
        "client-components/collections/sf-infinite-scroll.js"
        ]
   }

2. In your designerview-yourview.js place the following snippet right before the definition of your custom view controller:

   var designerModule = angular.module('designer');
   angular.module('designer').requires.push('sfInfiniteScroll');