$ resource未传递给控制器​​ - AngularJS

时间:2016-02-27 12:11:20

标签: javascript angularjs

我一直在尝试使用外部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;
          },

0 个答案:

没有答案