将无限滚动调用的结果附加到AngularJS中默认显示的结果

Question

我有一个函数进行$http调用并显示一些结果。在这个特定的函数之后，我添加了另一个函数，它将对滚动事件进行进一步调用（使用ng无限滚动模块）。

我的问题是，我似乎无法将第二次和后续调用的结果附加到默认调用显示的结果中。

这是我的密码。

$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.$watch(function() {
    return $scope.artist;
  }, function() {
    var pos = $scope.artist.name.toLowerCase().indexOf(', the');
    if (pos != -1) {
      $scope.artist.name = 'The ' + $scope.artist.name.slice(0, pos);
    }
  });
  var _page = 1;
  $scope.releases = [];
  $scope.loadDetails = function() {
      _page++;
      console.log(_page);
      $http.get('http://api.discogs.com/artists/' + id + '/releases?page=' + _page + '&per_page=12').then(function(data2) {
          $scope.releases = data2.releases;
      });
  };    
  $scope.clicked = true;
  $scope.sliding = true;
}

其中以下函数将调用第一页和12个项目：

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

稍后，我触发loadDetails函数，它将正确地进行调用（第2页、第3页等），并更新$scope.releases，但到目前为止，这种情况不会显示新结果，而是在调用loadDetails函数后完全消失。

  var _page = 1;
  $scope.releases = [];
  $scope.loadDetails = function() {
      _page++;
      console.log(_page);
      $http.get('http://api.discogs.com/artists/' + id + '/releases?page=' + _page + '&per_page=12').then(function(data2) {
          $scope.releases = data2.releases;
      });
  }; 

我认为，我不需要重新定义$scope.releases，而是必须将第二次和随后调用的结果附加到它，但我不知道该怎么做。

有什么提示吗？

这是一个正在工作的Plunker。

Answer 1

我认为主要问题是loadDetails签名中缺少id，而.then没有等待$http.get返回版本。我替换了.success，它起作用了。

以下是您的plunker的更新：http://plnkr.co/edit/gSwRNUn9mBvhWDtIaEzD

$scope.getDetails = function(id) {
  $scope._page = 1;
  $scope.releases = [];
  $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;
};
$scope.loadDetails = function(id) {
  console.log(id);
  if (!angular.isUndefined(id)) {
    $scope._page++;
    console.log($scope._page);
    $http.get('http://api.discogs.com/artists/' + id + '/releases?page=' + $scope._page + '&per_page=12').
    success(function(data2) {
      for (var i = 0; i < data2.releases.length; i++) {
        $scope.releases.push(data2.releases[i]);
      }
    });
  }
};

我只是使用循环和.push来追加到数组中。