Today let’s see how to create a simple infinite scroll using directives with angular.
The algorithm for an infinite scroll is pretty simple, you just have to check everytime your user use the scroll if the bottom of your element it close to the bottom of the visible area of the user (the bottom of the page because everything after will not be visible so nothing should appear after even footer ;) ).
I used a boolean to know if it’s scrolling or not to avoid multiple calls when you load something for example
The condition check if it’s not scrolling and if the bottom of the element is less than the bottom of the page minus an offset
I use a deferred object to be able to have an asynchronous call (ajax for example) and just have to resolve the deferred object when everything is complete, no need any callback
Right, this was the biggest part, now to use it you simply have to add the infinite-scroll attribute with the function to call and everytime you will arrive at the end of the page this function will be call and you will just have to resolve your deferred object when everything is done
angular.module('app',['infiniteScroll']).controller'myCtrl',($scope) ->$scope.data = $scope.loadNew = (deferredObj) -># add some data in your data arraydeferredObj.resolve()