控制器调用时的角度填充和返回服务变量

Question

我为此苦苦挣扎了一段时间，但无法弄清楚。我拥有的是主控制器、工厂和服务，我正在尝试将数组从服务存储到控制器中的 $scope。在查看项目时单击控制器中的此功能被触发：

$scope.getSongsInPlaylist = function()
                    {
                        var playlistId = this.item.idPlayliste;                        
                        $scope.Mp3Files = songInPlaylistFactory.getSongsForPlaylist(playlistId);

                    }

工作正常，此函数从视图中检索项目并将该项目的 id 发送到服务中。 比在我的服务中我有这样的代码：

var Songs = [ ];
    this.getSongsForPlaylist = function (id)
                        {
                             for (var i = 0; i < SongIsOnPlaylist.length; i++)
                             {
                                 if(SongIsOnPlaylist[i].idPlayliste == id)
                                 {                                 
                                     dataFactory.getDataById(mp3fileUrl, SongIsOnPlaylist[i].idPjesme)
                                     .success(function (data) {
                                         Songs.push(data);
                                         alert(Songs[0].naslovPjesme);//Alert one                              
                                     });                           
                                 }                            
                             }
                             alert(Songs[0]);// Alert two
                             return Songs;                         
                         }

dataFactory 是我在后端与 api 通信的工厂，它也可以工作。 var Songs 定义为： var Songs = [ ];而 SongIsOnPlaylist 则充满了数据。

当我触发它时，警报二给我未定义，警报一给我歌曲中第一首歌的名称。这意味着 var Songs 充满了数据，但是当我希望它返回控制器时，它是空的......

我在这里做错了什么，我会感谢任何帮助吗？

Answer 1

首先，您的 dataFactory.getDataById 似乎是异步调用。 因此，实际发生的情况是，当所有异步调用返回时，您会返回一个空的 Songs 数组，然后再填充它。

为了解决这个问题，我建议使用像 bluebird 这样的 Promise 库来做这样的事情：

// note that now your service will return a promise
this.getSongsForPlaylist = function (id) {
  return new Promise(function(resolve, reject) {

    var promises = [];
    // here in your loop just populate an array with your promises
    for (var i = 0; i < SongIsOnPlaylist.length; i++){
      if(SongIsOnPlaylist[i].idPlayliste == id){                                 
        promises.push( dataFactory.getDataById(mp3fileUrl, SongIsOnPlaylist[i].idPjesme) )
      }                            
    }
    // now use the library to resolve all promises  
    Promise.all(promises).then( function (results) {
      //HERE YOU WILL GET the results off all your async calls
      // parse the results 
      // prepare the array with songs 
      // and call
      resolve(Songs); 
    });
  });

}

然后你会像这样使用服务：

$scope.getSongsInPlaylist = function() {
  var playlistId = this.item.idPlayliste;                        
  songInPlaylistFactory.getSongsForPlaylist(playlistId)
  .then(function(Songs){
    $scope.Mp3Files = Songs
  })
  .error(function(err){
    //here handle any error
  });
}