时间戳

首页 > 解决方案 > 在 AngularJS 中使用无限滚动

angularjs - 在 AngularJS 中使用无限滚动

问题描述

我有一个从服务器检索一些数据的 $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>

标签： angularjs

解决方案

您可以创建一个指令，该指令将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

推荐阅读