Используйте бесконечную прокрутку в AngularJS

Question

У меня есть функция $ http, которая извлекает некоторые данные с сервера. Я хочу загрузить больше данных при прокрутке, но я не совсем уверен, как мне это сделать.

Это функция $ http:

$scope.getSubData = function(id){
    $http({
    method: 'GET',
    url: '/getSubData',
    params: {
      subId: id  
    }
}).then(function successCallback(response){
    $scope.sub = response.data.sub;
  });
};

И 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

Вы можете создать директиву, которая будет вызывать метод getSubData() при прокрутке.Эта директива будет помещена в родительский элемент div следующим образом:

<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>

Директива будет выглядеть примерно так:

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);
            }
        });
    };
});

Теперь, как будет вызываться getSubData()каждый раз, когда вы будете прокручивать, вам нужно будет обновить определение, чтобы объединить новые данные.

$scope.sub = $scope.sub.concat(response.data.sub);

Вы можете обратиться по этой ссылке для более подробной информации: https://coderwall.com/p/cl7zyg/api-calls-and-infinite-scroll-with-angularjs