使用AngularJS加載和使用數據

Question

我想了解它的邏輯，所以我只發布一些通用代碼：

1）我使用服務“ loadData”從JSON文件中獲取數據：

return {
        myData: function(){
           return $http.get(path + "data.json");
        }
}

2）在主控制器中：

loadData.myData().then(function(result){
      $scope.vm.myData = result.data;
});

然后，無論我在哪里尋找它，都可以：

console.log($scope.vm)

如果我在尋找，我將所有對象都與數據一起放在里面：

console.log($scope.vm.myData)

我總是“未定義”，而且我也不能在任何函數中使用它（唯一的方法是在上面的函數中查找它）。 我想要的只是在開始時獲取一些數據，然后在需要的地方使用它。

Answer 1

如果您的代碼看起來像這樣，那么第二個控制台語句將在異步調用返回之前（即，在Promise解決之前）觸發。

loadData.myData()
   .then(function(result) {
      $scope.vm.myData = result.data;
      console.log(1, $scope.vm);  // Runs when the promise resolves
   });
console.log(2, $scope.vm);  // Runs once the data is requested (no guarantee the promise has resolved yet).

結果，任何需要訪問從調用返回的數據的工作都必須放在then函數中，否則您不能保證數據可用。

上面的輸出是：

2 undefined
1 [your data object]

有關Angular中的Promise和異步調用的更多信息，這是一個很棒的資源，並且附帶卡通！ http://andyshora.com/promises-angularjs-explained-as-cartoon.html