Не могу получить доступ к данным из $resource.query() в Angular JS

Question

Я использую функцию запроса $resource следующим образом

resource.query(function(details){
    $scope.details=details;
    console.log($scope.details);

})
console.log($scope.details);

В приведенном выше коде сначала console.log печатает точные данные. но второй показывает неопределенный. Консольный вывод выглядит следующим образом.

angular.js:10661 XHR finished loading: GET "http://localhost:9000/app/myLeaveApplication/myLeaveApplication.html". 

myLeaveApplicationController.js:10 undefined

angular.js:10661 XHR finished loading: GET "http://localhost:9000/assets/data/data.json"

myLeaveApplicationController.js:7 
[Resource, Resource, Resource, $promise: Promise, $resolved: true]

Так что кто-нибудь, пожалуйста, помогите мне, зная, почему это происходит?

Answer 1

Это связано с тем, что resource.query является асинхронным методом, поэтому строка 10 выполняется перед функцией обратного вызова и по-прежнему не определена. Затем, когда запрос завершен, он вызывает обратный вызов, и $scope.details теперь уже содержит данные, поэтому это ожидаемое поведение. Это распространенная путаница для программистов, плохо знакомых с JS.

Answer 2

Это связано с тем, что resource.query является асинхронным методом, поэтому console.log($scope.details); строка, выполняемая до того, как детали назначены на $ scope.details

Вы можете попробовать следующее решение:

resource.query(function(details){
    $scope.details=details;
    console.log($scope.details);

});

$scope.$watch('details', function() {
   console.log($scope.details);
});