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

在AngularJS中使用infinitescroll

1 个答案: