javascript - Angularjs，从工厂获取数据

Question

我有一个工厂，我试图通过 $http 服务获取数据。

工厂:

(function(){
angular
.module('projectApp')
.factory('weatherfactory', weatherfactory);

weatherfactory.$inject=['$http'];

function weatherfactory($http){
var cities=[
  {name: "Łódź", link: "http://api.openweathermap.org/data/2.5/weather?q=Lodz,pl"},
  {name: "Warszawa", link: "http://api.openweathermap.org/data/2.5/weather?q=Warszawa,pl"}

];
var weat={};

var service={
  getCities: getCities,
  GetWeather: _GetWeather
};
return service;

function _GetWeather(link){
  $http.get(link).success(function(data){
    weat=data;
  });
  return weat;
}


function getCities(){
  return cities;
}

}})();

在 Controller 中，我从工厂调用函数:

function weatherData(city){
  sa.weather=weatherfactory.GetWeather(city);
  sa.show=true;
}

查看:

<div class="row">
    <div class="col-md-8">
      <select class="form-control" ng-model="sa.city">
        <option ng-repeat="city in sa.cities" value="{{city.link}}">{{city.name}}</option>
      </select>
    </div>
    <div class="col-md-4">
      <button class="btn btn-primary" ng-click="sa.weatherData(sa.city)">Wybierz</button>
    </div>
    <div ng-if="sa.show">
      {{sa.weather.name}}
    </div>
  </div>

它可以工作，但不正确。我必须单击按钮两次才能显示正确的数据。

Answer 1

当您发出任何服务器请求时，您必须等待，直到回调函数中提供可用响应。

在您的代码中，您将立即从函数 GetWeather 返回，因此 weat 第一次为空。当您第二次单击该按钮时，此时天气信息将可用，因此您可以查看天气信息。

您必须在代码中进行以下更改。

服务变更

function _GetWeather(link){
  return $http.get(link);
}

Controller 更改

function weatherData(city){
   weatherfactory.GetWeather(city).success(function (data) {
        sa.weather = data;
        sa.show = true;
   });
}