Question

我是Angular的新手我试图从工厂方法将一些数据传递到控制器。我记录Factory变量时可以看到数据。我尝试将数据传递给$ scope变量（$ scope.song），但在方法之外，$ scope变量是未定义的。我究竟做错了什么？代码如下：

.controller('MessagesCtrl', function($scope, FetchSong){
FetchSong.nextSong('audio-message')
  .then(function(response){
    $scope.song = FetchSong.queue;
    console.log(FetchSong.queue);    //logs the data 
    console.log(response.data);     //also logs the data
});
console.log($scope.song);   //returns undefined
})

Answer 1

以下是执行代码的时间表：

// t0: ask the service for the next song: the service sends an HTTP 
// request (I guess) to get it
FetchSong.nextSong('audio-message')
  .then(function(response){

    // t0 + 3 seconds: the http message has reached the server 10,000 
    // miles away from here, the server got the next song from its 
    // database, and sent it back. It took some time to travel the 10,000
    // miles in the other direction, but it finally arrived, so we can 
    // store it in the scope
    $scope.song = FetchSong.queue;
    console.log(FetchSong.queue);    //logs the data 
    console.log(response.data);     //also logs the data
});

// t0 + 1 microsecond: try to print the next song
console.log($scope.song);   //returns undefined

要实现的关键是，每次服务返回您调用then()并传递回调函数的承诺时，这意味着它现在不能只返回该值。它返回...一个将在以后解决的承诺，因为有些工作需要在结果可用之前异步完成。

因此，在您调用服务后立即打印结果并获得回复将永远不会有效。结果仅在稍后调用回调函数后才可用。

我写了一篇blog post来解释承诺如何运作以及如何避免陷入陷阱的陷阱。

Answer 2

问题是，在$scope.song promise回调中赋值之前，您尝试访问FetchSong.nextSong，因为promise是异步的，所有与promise返回数据相关的代码都应放在其回调中，见doc：

 .controller('MessagesCtrl', function($scope, FetchSong){

      FetchSong.nextSong('audio-message').then(function(response){

          $scope.song = FetchSong.queue;
          console.log(FetchSong.queue);    //logs the data 
          console.log(response.data);     //also logs the data

      }).then(function(){

          console.log($scope.song);   //returns FetchSong.queue

      });

 })

Answer 3

你应该使用$ scope。$ apply（）;在https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

中查看更多内容

$ scope变量未从Factory设置

3 个答案: