我一直在尝试使用外部API来获取使用$ resource的天气数据,我已经能够获得所有设置的资源,用于按邮政编码,城市和坐标进行搜索。当我将这些值直接从控制器传递到服务时,一切都按照应有的方式进行。但是,当我使用地理位置获取当前坐标时,我从API获得了正确的响应,但由于某种原因,它不能从控制器进入我的html。我已经使用Chrome开发者工具进行了几个小时的调试,试图找出直接给出坐标(与地理定位坐标相同)和首先从地理位置获取坐标之间的不同之处。请帮帮我!
服务:
app.factory('WeatherService', function($resource) {
var apiKey = 'defbe4f40449be22d4a2c7ef18af2a32';
return {
Geolocation: $resource('http://api.openweathermap.org/data/2.5/weather?lat=:latitude&lon=:longitude&APPID=:key', {
latitude: "@latitude", longitude: "@longitude", key: apiKey}, {
'get' : { method: 'GET', params: {}, format: 'json', isArray: false }}),
ZipcodeCountry: $resource('http://api.openweathermap.org/data/2.5/weather?zip=:zipCode,:countryCode&APPID=:key', {
zipCode: "@zipCode" , countryCode: "@countryCode", key: apiKey}, {
'get' : { method: 'GET', params: {}, format: 'json', isArray: false }}),
CityCountry: $resource('http://api.openweathermap.org/data/2.5/weather?q=:city,:countryCode&APPID=:key', {
city: "@city", countryCode: "@countryCode", key: apiKey}, {
'get' : { method: 'GET', params: {}, format: 'json', isArray: false }})
};
});
映射从API接收的数据的逻辑
//Logic for getting API data
var mapWeatherData = function(data) {
var weather = { name: null, main: {}, wind: {}, clouds: null};
weather.name = data.name;
if (data.main)
{
weather.main.current = data.main.temp;
weather.main.humidity = data.main.humidity;
weather.main.pressure = data.main.pressure;
weather.main.min = data.main.temp_min;
weather.main.max = data.main.temp_max;
}
if (data.wind)
{
weather.wind.speed = data.wind.speed;
weather.wind.deg = data.wind.deg;
}
weather.clouds = weather.clouds ? data.clouds.all : undefined;
return weather;
};
var getWeatherByGeolocation = function(lat, lon, WeatherService) {
var weather = WeatherService.Geolocation.get({latitude: lat, longitude: lon}, function(data) {
weather = mapWeatherData(data);
});
return weather;
};
路线配置,天气控制器就是所谓的气象服务:
app.config(function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
name: "Home",
controller: function() {
},
controllerAs: "homeCtrl",
css: 'css/partials/home.css'
}).
when('/weather', {
templateUrl: 'partials/weather.html',
name: "Weather",
controller: function($scope, $timeout, WeatherService) {'-112.0068800', WeatherService);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
$timeout(function(){
this.coordinates = {latitude: position.coords.latitude, longitude: position.coords.longitude};
this.weather = getWeatherByGeolocation(this.coordinates.latitude, this.coordinates.longitude, WeatherService);
});
});
}
},
controllerAs: "weatherCtrl",
css: 'css/partials/weather.css'
}).
otherwise({
redirectTo: '/weather'
});
});
替换
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
$timeout(function(){
this.coordinates = {latitude: position.coords.latitude, longitude: position.coords.longitude};
this.weather = getWeatherByGeolocation(this.coordinates.latitude, this.coordinates.longitude, WeatherService);
});
});
}
使用
this.weather = getWeatherByGeolocation('40.3141200', '-112.0068800', WeatherService);
测试直接向服务提供坐标。
我还是AngularJS的新手,所以请让我知道我能做些什么来解决这个问题。我已经花了数小时研究这个,而且我已经没有资源了。拜托,谢谢!
更新:
感谢Sunil D,他们指出我需要将this
分配给我的控制器中的变量,以便当服务返回我的数据时,它需要更新,因为this
可以更改。这是我在路由控制器中使用的内容:
controller: function($scope, $timeout, WeatherService) {
var controller = this;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
$timeout(function(){
controller.coordinates = {latitude: position.coords.latitude, longitude: position.coords.longitude};
controller.weather = getWeatherByGeolocation(controller.coordinates.latitude, controller.coordinates.longitude, WeatherService);
});
});
}
this.weather = controller.weather;
},