在$http.success()中设置的$scope的属性在$http.success()之外没有定义。为什么?

I am following an AngularJS tutorial that uses $resource to retrieve JSON data from an API call. For the purpose of understanding, I tried to replace the $resource code with $http code and I encountered a scope problem. Logging $scope.weatherResult outside of .success() results in undefined. Why is that the case? The view receives the data just fine.

我使用的是AngularJS教程，它使用$resource从一个API调用中检索JSON数据。出于理解的目的，我尝试用$http代码替换$resource代码，并且遇到了范围问题。日志美元范围。成功的外部环境导致了没有定义的结果。为什么会这样呢?视图接收到的数据很好。

Also,

同时,

// $scope.weatherAPI = $resource(
     'http://api.openweathermap.org/data/2.5/forecast/daily',
     { callback: 'JSON_CALLBACK' }, { get: { method: 'JSONP' }}
   );

// $scope.weatherResult = $scope.weatherAPI.get({ q: $scope.city, cnt: 2});


$http.get('
  http://api.openweathermap.org/data/2.5/forecast/daily'
    + '?q='
    + $scope.city
    + '&'
    + 'cnt=2'
  )
  .success(function(data) {
    $scope.weatherResult = data;
  })
  .error(function(error) {
    console.log(error);
  });

console.log($scope.weatherResult);

2 个解决方案

#1

Because $http is asynchronous. $scope.weatherResult is defined only when the http response is available.

因为http是异步的。美元的范围。只有当http响应可用时才定义weatherResult。

See for example http://code.tutsplus.com/tutorials/event-based-programming-what-async-has-over-sync--net-30027, or better, as PSL says: How do I return the response from an asynchronous call?

例如，请参见http://code.tutsplus.com/tutorials/event-based- -- async- over-sync- net- net-30027，或者更好些，如PSL所述:如何从异步调用返回响应?

You can use $watch to be informed:

您可以使用$watch通知:

$watch('weatherResult',function(newValue,oldValue)) {
..
}

#2

When you write

当你写

.success(function(data) { $scope.weatherResult = data; })

.success(功能(数据){美元范围。weatherResult =数据;})

in your program, you are asking the remaining part of your code to continue its execution with a promise. In this case console.log($scope.weatherResult); will be executed just after your $http.get() method without waiting for the response from the http request.

在您的程序中，您要求代码的其余部分以一个承诺继续执行。在这种情况下console.log($ scope.weatherResult);将在您的$http.get()方法之后执行，而无需等待http请求的响应。

Hence, console.log($scope.weatherResult); will be executed even before the API response is received.

因此,console.log($ scope.weatherResult);甚至在收到API响应之前就会执行。

Note that $scope.weatherResult is defined inside .success(), so until the response is a success, Angular has no idea about $scope.weatherResult hence the console gives undefined. It will be undefined even in case of an error.

注意,美元范围。weatherResult定义在.success()中，所以在响应成功之前，角对$scope没有概念。因此，控制台给出的是未定义的天气结果。即使出现错误，它也不会被定义。

To view the response of server, you can log it well inside success block.

要查看服务器的响应，您可以在success块中记录它。

.success(function(data) { $scope.weatherResult = data; console.log("$scope.weatherResult = ",$scope.weatherResult); })

.success(功能(数据){美元范围。weatherResult =数据;console.log(“美元范围。weatherResult = ",$ scope.weatherResult);})

#1