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;
}

} }）（）;

在控制器中我从工厂调用函数：

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);
}

控制器更改

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

Angularjs，从工厂获取数据

1 个答案: