被設置爲get調用後，變量保持undefined

Question

嗨，我試圖學習如何使用AngularJS和MEAN棧進行開發。我非常喜歡初學者開發者，所以這可能是缺乏知識問題。

因此，在下面的代碼中，我通過get調用運行它之後，預設了我的變量$ rootScope.sprintStart & $ rootScope.taskPopAgain，並試圖存儲一個值。如果我在get調用中執行console.log，則該值會按預期返回，get調用後的下一行消失。我在這裏做錯了什麼？

來自api/tasks的值是一個包含對象的數組，並且api/sprint模型應該發送一個對象。

我知道我可以清理並簡化我的變量，因爲它可以幫助我可視化發生的事情。再次，我是一個初學者大聲笑。

感謝您的幫助！

'use strict'; 
 

 
angular.module('inBucktApp') 
 
    .service('VariableService', function() { 
 
    // AngularJS will instantiate a singleton by calling "new" on this function 
 
     var ticketId = 'noTicketYet'; 
 
     var ticketAssigneeName = 'noTicketNameYet'; 
 

 
     return { 
 
      getPropertyId: function() { 
 
       return ticketId; 
 

 
      }, 
 
      getPropertyName: function() { 
 
       return ticketAssigneeName; 
 

 
      } 
 
      , 
 
      setProperty: function(value, valueName) { 
 
       ticketId = value; 
 
       ticketAssigneeName = valueName; 
 
      } 
 
     }; 
 
     }) 
 
    .run(['$rootScope', '$http', 'socket', 'VariableService', function($rootScope, $http, socket, VariableService) { 
 

 

 
     $rootScope.sprintStart; 
 
     $rootScope.taskPopAgain; 
 

 
     $http.get('/api/sprints').success(function(sprints) { 
 

 
      $rootScope.sprints = sprints.pop(); 
 

 
      $rootScope.sprintStart = new Date($rootScope.sprints.start); 
 
      $rootScope.sprintEnd = new Date($rootScope.sprints.end); 
 

 
      console.log($rootScope.sprintStart) 
 

 
      socket.syncUpdates('sprints', $rootScope.sprints); 
 
     }); 
 

 
     $http.get('/api/tasks').success(function(task) { 
 
      $rootScope.task = task; 
 
      $rootScope.taskPop = _.flatten($rootScope.task); 
 
      $rootScope.taskPopAgain = $rootScope.taskPop.pop(); 
 
      console.log($rootScope.task); 
 
      // console.log($rootScope.taskPop); 
 
      console.log($rootScope.taskPopAgain.start); 
 
      console.log($rootScope.taskPopAgain); 
 
      socket.syncUpdates('task', $rootScope.task); 
 
     }); 
 

 
     //coming up as undefined now, so function below doesnt work. 
 
     console.log($rootScope.taskPopAgain); 
 
     console.log($rootScope.sprintStart);

Answer 1

這對於初學者來說是常見的問題。您錯過了$http方法是異步的想法。在$http方法執行完畢之前，您正在撥打console.log。在你的success方法中，你正在做的一切正確，但到那個時候，你的console.log消息已經執行。在調試器中運行你的應用程序，你會發現這是真的。

// step 1: this code executes 
    $http.get('/api/tasks').success(function(task) { 
     //step 3: finally this, when the api responds 
     $rootScope.task = task; 
     $rootScope.taskPop = _.flatten($rootScope.task); 
     $rootScope.taskPopAgain = $rootScope.taskPop.pop(); 
     console.log($rootScope.task); 
     // console.log($rootScope.taskPop); 
     console.log($rootScope.taskPopAgain.start); 
     console.log($rootScope.taskPopAgain); 
     socket.syncUpdates('task', $rootScope.task); 
    }); 

    //step 2: then this 
    //coming up as undefined now, so function below doesnt work. 
    console.log($rootScope.taskPopAgain); 
    console.log($rootScope.sprintStart); 

如果你把一個斷點在$http呼叫，在底部的console.log調用，一個成功的方法，你會看到執行的順序是不針對你所期望的。

所以，基本上，你想用$http調用返回的數據做任何事情，你需要做INSIDE的成功調用。

解決你的問題，你會做財產以後這樣的：

$http.get('/api/tasks').success(function(task) { 
    $rootScope.task = task; 
    $rootScope.taskPop = _.flatten($rootScope.task); 
    $rootScope.taskPopAgain = $rootScope.taskPop.pop(); 
    myFunction(); 
}); 

function myFunction() { 
    // do something with here 
    console.log($rootScope.taskPropAgain); // this will not be undefined 
}