AngularJS - $範圍變量沒有存儲功能

Question

以外的數據我有這樣一個非常簡單的功能我controller內：

fetchUsers = function() { 
    UserService.getUsers(). 
    success(function(data, status) { 
    $scope.users = data.users; 
    console.log($scope.users); 
    }); 
}; 

fetchUsers(); 

console.log($scope.users); 

它基本上使用service從一個API檢索某些數據，和功能裏面的console.log工作正常，併發送一個數組到控制檯[Object Object]，我可以打開並看到我的所有用戶沒有問題。然而，當我通過調用fetchUsers()並運行一個console.log而將此功能置於該功能之外時，我只需返回一個空數組，其中[]被輸出到控制檯。

任何人都可以想到會導致這種情況的任何東西嗎？我有點困惑。

Answer 1

啊我看你終於被擊中由JavaScript的異步代碼一個非常簡單的解釋。並非所有事情都按順序進行

例如，如果我有這樣的一段代碼

setTimeout(function(){ 
    var test = 'hello'; 
    console.log('first test : ' + test); 
}, 1000) 

console.log('second test : ' + test); 

你會發現，第二次測試將返回即使測試是先前設置（以行數計算）什麼都沒有。現在你可能會想，所以你把它設置爲1000毫秒（但是嘗試相同的代碼並將其設置爲0秒，你會看到相同的效果，這是由於事件循環用於管理異步代碼 - 基本上不管你的setTimeout是放在優先級的末尾，這意味着當第二個控制檯日誌被調用 - 測試還沒有定義。在同一個線程，所以想象如果setTimeout的卡住了那裏，等待1整秒，沒有在你的UI會工作 - 將凍結

隨着中說，異步代碼的另一個重要用途是HTTP請求到服務器，這些請求可能需要不同的時間，這意味着如果你使用同步我們的代碼，你的UI會凍結。想象一下facebook--它不斷從服務器中檢索數據。

再回到你的代碼，這個方法下面從服務器

UserService.getUsers(). 
    success(function(data, status) { 
    $scope.users = data.users; 
    console.log($scope.users); 
    }); 

成功函數裏面的東西又是異步檢索數據，所以無論你把後，將立即運行，並不管是內部的一旦你的'承諾'或要求得到滿足，成功功能就會運行。

因此，你可能有

fetchUsers(); 

console.log($scope.users); 

但是請注意，$ scope.users此控制檯後設置。日誌

Answer 2

UserService.getUsers()正在恢復，因爲它是在異步與控制器代碼執行，從而你console.log($scope.users)在你的控制器是最有可能被API調用返回之前執行，執行成功的回調，這將在未來解決的承諾。

在兩個console.log（）語句中的瀏覽器開發人員工具中放置一個斷點，您應該觀察此行爲。

Here是承諾的一般

Answer 3

您的代碼運行正常。請求的異步性造成了混淆。因爲它是異步的，所以成功回調實際上是在第二次console.log（）調用之後最後執行的。

Answer 4

通過在函數外部初始化$ scope.users global可能嗎？我也扔了功能getUsers方法中：

$scope.users = []; 

fetchUsers = function() { 
    UserService.getUsers(function(data, status) { 
    $scope.users = data.users; 
    console.log($scope.users); 
    }) 
}; 

fetchUsers(); 
console.log($scope.users);