使用AngularJS加载和使用数据

Question

I'd like to understand the logic of it, so I just post some generic code:

1) I get the data from a JSON file with the service "loadData":

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

2) In the main controller:

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

then, wherever I look for that with:

console.log($scope.vm)

I have the all object with the data inside, instead, if I look for:

console.log($scope.vm.myData)

I have always "undefined", and also I cannot use it in any function (the only way is to look for it inside the function above). What I'd like to have is just to get some data at the begin and then use it wherever I need it.

Answer 1

If your code looks something like this, then the second console statement is firing before the asynchronous call comes back (ie before the promise resolves).

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).

As a result, any work that needs access to the data returned from the call must be put inside the then function, otherwise you have no guarantee that the data is available.

The output above is:

2 undefined
1 [your data object]

For more information on promises and asynchronous calls in Angular, this is a fantastic resource, and comes with cartoons! http://andyshora.com/promises-angularjs-explained-as-cartoon.html