将$ http数据从服务传递到控制器（异步）

问题描述：

我通过制作天气应用程序来学习Angular。所以，在index.html中我有一个下拉列表。

<select ng-model="city" ng-options="city.cityName for city in cities" ng-change="getWheather()"> 
    <option value=""></option> 
</select>

根据哪个城市用户从该列表中选择，他得到一个天气预报。当功能getWheather()在控制器中时，它完全正常工作。一旦我把它放在工厂里，它就不再工作了。我认为它是因为它是异步的，但我没有修复它的运气。这是工厂（在URL中，数字45和15应该是city.latit和city.longit，但我不能得到它的工作。如果我将值“城市”传递给函数getWheather（），它是不确定的）：

app.factory('wheatherService', function($http) { 
    var getWheather = function(){ 
    var url ="https://api.forecast.io/forecast/api_key/"+45.815+","+15.966+"?callback=JSON_CALLBACK"; 
     return $http.jsonp(url); 
    }; 

    return { 
    getWheather: getWheather 
    }; 
});

这是控制器：

app.controller('inputCtrl', function($scope, wheatherService){ 
    $scope.cities = [{ "cityName" : 'Paris', "latit" : 45.815399, "longit" : 15.966568}, 
        { "cityName" : 'London', "latit" : 45.328979, "longit" : 14.457664}, 
        { "cityName" : 'NewYork', "latit" : 43.510742, "longit" : 16.437489 }]; 

    wheatherService.getWheather().success(function(data){ 
    $scope.wheatherData = data; 
     console.log($scope.wheatherData); 
    }); 
});

所以今天的主要问题是 - 有什么是让选择从下拉列表中值getWheather（）函数的方式吗？

答

您还没有控制器getWheather方法绑定到考虑以后使用任何功能。

$scope.getWheather = getWheather;

你们求告getWheather方法

function getWheather(city){ 
    wheatherService.getWheather(city).success(function(data){ 
     $scope.wheatherData = data; 
     console.log($scope.wheatherData); 
    }); 
}

在您查看ng-change应该通过城市作为参数

ng-change="getWheather(city)"

谢谢！它做到了！ – mirta

答

传递city对象的功能。

ng-change="getWheather(city)"

我试过..当我console.log它说undefined ... – mirta

答

请记住，在视图中你应该调用的函数的承诺从控制器和控制器应该是与工厂通信的那个。

但是，要尝试回答您的问题，如果您将城市传递给getWheather，它将被取消，因为您不接受getWheather函数中的任何参数。

var getWheather = function(){...应该var getWheather = function(city){...

，然后在工厂里，你应该尝试这样的事情。

var url ="https://api.forecast.io/forecast/api_key/"+ city.latit +","+ city.longit +"?callback=JSON_CALLBACK";

希望这对你的作品= d！

将$ http数据从服务传递到控制器（异步）

相关推荐