将ngInfiniteScroll实现到$http服务

Question

我有以下服务从外部API获取数据：

$scope.getDetails = function (id) {
  $http.get('http://api.discogs.com/artists/' + id).
    success(function(data) {
        $scope.artist = data;
    });
  $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=12').
    success(function(data2) {
        $scope.releases = data2.releases;
    });
  $scope.clicked = true;
  $scope.sliding = true;
}

它在这里填充了ng-重复：

<div class="col-md-3" ng-controller="ImageCtrl" ng-repeat="release in releases | filter:album | filter:year | filter:{ role: \'main\' }">
  <div class="release"><img class="img-responsive" ng-src="{{image}}" />           
    {{release.title}}
  </div>
</div>

我一直在检查ngInfiniteScroll文档，但我看不清楚如何实现它。

当页面触底时，我应该做一个releases?page=1++吗？

我还从$http站点上看到了基于ngInfiniteScroll的示例，但这是对我当前知识的一点了解，我不知道如何使它适应我的代码。

有什么暗示吗？

编辑：我已经使用刺客应答来创建下面的代码，但仍然无法运行。我错过了什么吗？

$scope.getDetails = function (id) {
  $http.get('http://api.discogs.com/artists/' + id).
    success(function(data) {
        $scope.artist = data;
    });
  $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=12').
    success(function(data2) {
        $scope.releases = data2.releases;
  });  

  var _page = 0;
  $scope.releases = [];
  $scope.LoadDetails = function(id) {
      _page++;
      $http.get('http://api.discogs.com/artists/' + id + '/releases?page=' + _page + '&per_page=12').then(function(data2) {
          $scope.releases = $scope.data2.releases;
      });
  };    
  $scope.clicked = true;
  $scope.sliding = true;
}

请注意，我两次包含发布$http查询，首先调用第一批版本，然后在LoadDetails函数中调用！

还有，这是一个工作柱塞！

Answer 1

无限滚动通过监听元素上的滚动事件来工作，如果您位于底部一定的距离内，则调用回调。回调将加载更多的结果(在您的情况下通过$http加载)。这样你就可以像这样建立无限的滚动：

// In your controller
var _page = 0;
$scope.releases = [];
$scope.LoadDetails = function() {
    _page++;
    $http.get('/endpoint/?page=' + _page /* ... whatever else you need */).then(function(data) {
        $scope.releases = $scope.releases.concat(data);
    });
};

// In your dom
<div infinite-scroll="LoadDetails()">
    <div ng-repeat="release in releases"> {{release}}
    </div>
</div>

这是一个链接到他们的演示

至于实现它，您可以查看这个小提琴，其中实现了一个基本的无限滚动。

希望这能有所帮助！