Use infinitescroll in AngularJS - angularjs

Question

I have a $http function that retrieves some data from the server.
I want to load more data when scrolling, but I am not really sure how I can get this working.
This is the $http function:
$scope.getSubData = function(id){
$http({
method: 'GET',
url: '/getSubData',
params: {
subId: id
}
}).then(function successCallback(response){
$scope.sub = response.data.sub;
});
};
And the html:
<div ng-repeat="item in sub">
<tr ng-repeat="message in item.messages">
<td>{{message.title}}</td>
<td>{{message.date}}</td>
</tr>
</div>

Answer 1

You can create a directive which will call the method getSubData() when scrolled.
This directive will be placed at the parent div like this:
<div when-scrolled="getSubData()">
<div ng-repeat="item in sub">
<tr ng-repeat="message in item.messages">
<td>{{message.title}}</td>
<td>{{message.date}}</td>
</tr>
</div>
</div>
The directive will go something like this:
angular.module('app').directive('whenScrolled', function() {
return function(scope, elm, attr) {
var raw = elm[0];
elm.bind('scroll', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.whenScrolled);
}
});
};
});
Now, as the getSubData() will be called each time you'll scroll, you need to update the definition to concat the new data.
$scope.sub = $scope.sub.concat(response.data.sub);
You can refer this link for more details:
https://coderwall.com/p/cl7zyg/api-calls-and-infinite-scroll-with-angularjs