Use an infinite scroll directive

Feather's sfInfiniteScroll provides you with the functionality for infinite scrolling through items. When more data is required the implementation of the directive invokes a delegate that loads additional items. This directive can be used as an alternative to paging.

The sfInfiniteScroll is a directive with an isolated scope that is defined in a module with the same name: sfInfiniteScroll. For more information, see isolated scope.

Add infinite scroll directive

The following tutorial demonstrates how to add an infinite scroll directive in a widget designer's view. Keep in mind that you are free to use Feather selectors and directives outside of widget designers. For more information, see Use content selectors outside of a widget designer's view.

For AngularJs to link the sfInfiniteScroll directive in your custom designer view, you must load the script of the directive and add a dependency to the module:

1. In your DesignerView.YourView.json file, add a scripts array. As a result, the file content looks similar to this:

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

2. In your DesignerView-YourView.js file, right before the definition of your custom view controller, place the following code snippet:

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

3. In your DesignerView.YourView.cshtml file, place the following tag where you want to render the sfInfiniteScroll directive:

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

   NOTE: The height of the element must be limited in order for a scroll to be displayed.

4. In your designer's controller, add the following code:

designerModule.controller('YourViewCtrl', ['$scope', function ($scope) { $scope.items = [];

	$scope.loadMore = function () {
		var count = $scope.items.length;
		for (var i = count; i < count + 20; i++) {
			$scope.items.push(i);
		}
	};

	$scope.loadMore();

}]); ``` The code above generates 20 sequential numbers that are added to the items collection each time the element with an infinite scroll is scrolled to the bottom. In a more realistic scenario, this function can call a service and load data asynchronously.