Angularjs:将数据从一个工厂调用存储到变量中，以便在另一个工厂调用中使用

Question

我对 angularjs 和 ionic 完全陌生。我尝试将从工厂调用接收到的 4 个值存储到 4 个变量中，我需要将这些值用作另一个函数中 $http get 调用的参数:

这是在我的 Controller 开头定义的 4 个变量:

var firstId;
var firstTimestamp;
var lastId;
var lastTimestamp; 

我从以下对我的工厂的调用中接收数据并将数据分配给变量:

ContentFactory.getAlbums().then(function(albums){

   $scope.albums = albums;

   firstId = albums.first_id;
   firstTimestamp = albums.first_timestamp;
   lastId = albums.last_id;
   lastTimestamp = albums.last_timestamp;
});

然后我尝试将这些变量用作对我的工厂的另一个调用的参数(在 View 中调用 loadOlderAlbums):

$scope.loadOlderAlbums = function(lastId, lastTimestamp) {
 ContentFactory.getOlderAlbums(lastId, lastTimestamp).then(function(albums){
    $scope.albums = $scope.albums.concat(albums);
    $scope.$broadcast('scroll.infiniteScrollComplete');
 });
};

检查我的工厂时，变量 lastId 和 lastTimestamp 未定义:

getOlderAlbums : function(lastId, lastTimestamp){
        console.log(lastId); // lastId is undefined
        return $http.get('http://api.domain.xxx/albums/city/1? &direction=before&id=' + lastId + '&time=' + lastTimestamp + '&api_key=******&lang=en').then(function(response) {
                albums = response.data;
                return albums;
        });
    }

在控制台中，我看到以下错误:

GET http://api.domain.xxx/albums/city/1?&direction=before&id=undefined&time=undefined&api_key=***&lang=en 500 (Internal Server Error)

因为 id 和 time 未定义。

这是完整的 Controller :

.controller('PicturesCtrl', function($scope, $ionicLoading,  ContentFactory) {

$scope.albums = [];

var firstId;
var firstTimestamp;
var lastId;
var lastTimestamp; 

ContentFactory.getAlbums().then(function(albums){
  $scope.albums = albums;
  firstId = albums.first_id;
  firstTimestamp = albums.first_timestamp;
  lastId = albums.last_id;
  lastTimestamp = albums.last_timestamp;

  // console.log(firstId);  -> values are correctly stored
  // console.log(firstTimestamp); -> values are correctly stored
  // console.log(lastId); -> values are correctly stored
  // console.log(lastTimestamp); -> values are correctly stored

 });


$scope.loadOlderAlbums = function(lastId, lastTimestamp) {
 ContentFactory.getOlderAlbums(lastId, lastTimestamp).then(function(albums){
    $scope.albums = $scope.albums.concat(albums);
    $scope.$broadcast('scroll.infiniteScrollComplete');
 });
};

})

和工厂:

.factory('ContentFactory', function($http) {

var albums = [];

return {



    getAlbums : function(){
        return $http.get('http://api.domain.xxx/albums/city/1?lang=en&api_key=***').then(function(response) {
                albums = response.data;
                return albums;
        });
    },


    getOlderAlbums : function(lastId, lastTimestamp){
        console.log(lastId); // lastId is undefined
        return $http.get('http://api.domain.xxx/albums/city/1?&direction=before&id=' + lastId + '&time=' + lastTimestamp + '&api_key=***&lang=en').then(function(response) {
                albums = response.data;
                return albums;
        });
    }
   }
})

任何帮助弄清楚为什么变量的值没有传递给第二个工厂调用的帮助都非常感谢。这可能是一个合乎逻辑的问题，因为我是一个新手；)

更新:

请在下面找到我从 Content.Factory.getAlbums 中的第一次 $http GET 调用中收到的示例响应

{
"city_id": 1,
"total_pages": 199,
"total_results": 3977,
"first_id": 15448,
"first_timestamp": 1437230820,
"results": [
    {
        "album_id": "15448",
        "title": "MAD pres. Splash The Madness Party at Aftermoon",
        "description": "The MAD crew is back and returned to Aftermoon for a night of Melbourne Bounce, Hip Hop, Big Room, Electro- and Progressive House. At the decks were Dam-Sib-Dao, Beatender, Madz Mellow & Odyszey, supported by Mc Ben10.",
        "photographer_id": "8",
        "photographer_name": "ploy",
        "image_count": "88",
        "cover_image": "5dd26da7f37da641d775568d2e98ae44.jpg",
        "date": "2015-07-18 21:47:00",
        "location_id": "705",
        "location_name": "Aftermoon"
    },
    {
        "album_id": "15446",
        "title": "Superhero Charity Party at KU DÉ TA Bangkok",
        "description": "KU DÉ TA Bangkok and the charity organisation \"Habitat for Humanity Thailand\" joined forces for the SUPERHERO “CHARITY PARTY\". Habitat for Humanity Thailand improves the quality of Thai people’s lives through building homes and transforming communities. Entry is Free, but there guests are invited to do a FREE-WILL DONATION of which 100% will go to Habitat for Humanity Thailand to build houses under the program “Make Her Day” in Pathumthani.",
        "photographer_id": "15",
        "photographer_name": "win",
        "image_count": "176",
        "cover_image": "742a0065d046418041175ff8005d7174.jpg",
        "date": "2015-07-18 18:46:00",
        "location_id": "809",
        "location_name": "KU DÉ TA"
    }
],
"last_id": 15427,
"last_timestamp": 1437062520
}

$scope.loadOlderAlbums 在我的 View 中被调用( ionic 无限滚动)

<ion-infinite-scroll
  on-infinite="loadOlderAlbums()"
  distance="1%">
</ion-infinite-scroll>

Answer 1

更改您的 $scope 方法以获取旧专辑。您期望传入参数 - 但是当您调用它时，它们应该已经在您的 Controller 范围中定义，因此实际上没有必要这样做。

看看你是如何不暴露 lastId或 lastTImestamp到 this或 $scope ，这让我相信在您看来，您正在像这样调用方法:

<button ng-click="loadOlderAlbums()">Load more albums</button>

在这种情况下， lastId和 lastTimestamp从未传递给您的 $scope 函数，它只是不起作用。

像这样的事情应该这样做:

$scope.loadOlderAlbums = function() {
 ContentFactory.getOlderAlbums(lastId, lastTimestamp).then(function(albums){
    $scope.albums = $scope.albums.concat(albums);
    $scope.$broadcast('scroll.infiniteScrollComplete');
 });
};

现在，您不必将 lastId 或 lastTimestamp 传递到您的函数中(如您之前要求的那样)。

如果您确定 getAlbums()调用 有 在开始滚动之前触发，以下应该可以正常工作(编辑了一堆代码以突出重点):

var lastId, lastTimeStamp: 

getAlbums().then(function (res) {
  lastId = res.lastId;
  lastTimeStamp = res.lastTimeStamp;
});

/** Later, called from the view **/
function loadOlderAlbums () { // <-- Kill the arguments.
  $http.get('path' + lastId + lastTimeStamp).then(function (res) {
    /** woop woop! **/ 
  }); 
}

否则 - 您需要为该场景设置故障保护。您可以使用另一个 promise ，或者暂时使用非常简单的方法来排除它:

var loaded = false;

function getAlbums () {
   $http.get('albums').then(function (res) {
     /** set the ID's and timestamps **/ 
     loaded = true;
   });
}

function loadOlderAlbums () {
  if (!loaded) {
    throw new Error('Yep, nope. We have to get some other albums first. Sorry!');
  }

  /** your old loadOlderAlbums implementation **/ 
}

通过添加 throw声明在那里，您可以验证是否有:

lastId 的存储(通过 getAlbums)/使用(通过 loadOlderAlbums)中的竞争条件和 lastTimeStamp变量。

或者它神奇地开始工作。

由于您使用的是 Ionic - 它又使用 ui-router；您可以将调用移至 getAlbums成 resolve block并且您将确保在开始滚动之前将数据加载到您的 Controller 中。

这可能看起来像:

.state('...', {
  controller: 'PicturesCtrl',
  resolve: {
    preloadedAlbums: function (ContentFactory) { // available for DI later into your controller.
      return ContentFactory.getAlbums().then(function (response) {
        return {
          albums:  response,
          firstId: response.first_id,
          firstTimeStamp: response.first_timestamp,
          lastId: response.last_id,
          lastTimeStamp: response.last_timestamp
        }; 
      });
    }
  }
}

现在，每当您尝试导航到所述状态时 - 解析对象将在调用 Controller 之前获取其内容。因此，您可以确保在用户开始在您的 PicturesCtrl 范围内滚动之前数据存在。 ，以及 loadMoreAlbums 所需的参数将在那里。

您的 PicturesCtrl现在可以看起来像:

.controller('PicturesCtrl', function ($scope, $ionicLoading,  ContentFactory, preloadedAlbums) {

  $scope.albums = preloadedAlbums;

  var lastId = preloadedAlbums.lastId;
  var lastTimeStamp = preloadedAlbums.lastTimeStamp; 
  /** etc **/ 
});

我会尝试第一个建议(带有 throw )以确保它是 getAlbums 的问题。 promise 尚未解决导致您的问题。然后我会考虑搬到 resolve堵塞。

如果这不能根除您的问题的原因，我会用 debugger 爆破代码库并从头到尾逐步验证实际发生的情况。