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

我已經檢查documentation of ngInfiniteScroll但我看不清楚我怎麼能實現它。

如果我基本上做一個版本？頁=當頁面觸底1 ++？

我也看到了基於HTTP $從ngInfiniteScroll網站的例子，但它是在我目前的知識一點點，我不知道如何使它適應我的代碼。

任何提示？

編輯：我用hassassins回答創建下面的代碼，但仍然無法運行。我錯過了什麼嗎？

$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函數裏面！

而且，這裏有一個working Plunker！

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> 

這裏是一個link to their demo

作爲實現它，你可以看看這個fiddle ，其中一個基本的無限滾動實施。

希望這有助於！