如何在AngularJs中将param从控制器传递给服务

时间:2017-07-03 20:28:38

标签: javascript angularjs openweathermap

我目前正在开展一个项目,以帮助我更好地理解angularjs!我目前仍然坚持如何将参数从控制器传递给服务。

在我的程序中,我创建了一个名为" GetForecastByLocation"当用户键入输入时单击按钮。从那里我想获取他们的输入,然后将其传递给service.js中的http调用。

最初,$ http.get位于API网址的一个很长的巨大字符串中,但我用Google搜索,似乎我在尝试更改字符串的一部分时应该使用参数。截至目前,我知道参数是硬编码到特定的城市,但我想获取新的输入并将vm.city的值传递给$ http.get调用。

如果有人可以提供帮助,我会非常感激。谢谢!

controller.js

    var app = angular.module('weatherApp.controllers', [])
    app.controller('weatherCtrl', ['$scope','Data',
        function($scope, Data) {

        $scope.getForecastByLocation = function(myName) {
            $scope.city = myName;
            Data.getApps($scope.city);},

        Data.getApps(city)
        .then(function(data)){
        //doing a bunch of things like converting units, etc
        },
        function(res){
            if(res.status === 500) {
            // server error, alert user somehow
        } else { 
            // probably deal with these errors differently
        }
        }); // end of function
}]) // end of controller 

service.js

.factory('Data', function($http, $q) {
       var data = [],
           lastRequestFailed = true,
           promise;
       return {
          getApps: function() {
             if(!promise || lastRequestFailed) {
            promise = $http.get('http://api.openweathermap.org/data/2.5/weather?',{
              params: {
                q: Tokyo,
              }
            })
            .then(function(res) {
                lastRequestFailed = false;
                data = res.data;
                return data;
            }, function(res) {
                return $q.reject(res);
            });
         }
         return promise;
      }
   }
});

2 个答案:

答案 0 :(得分:1)

将参数传递给工厂方法与将参数传递给普通旧函数没什么不同。

首先,设置getApps以接受参数:

.factory('Data', function($http, $q){
    // ...
    return {
        getApps: function(city){
            promise = $http.get(URL, {
                params: {q: city}
            }).then( /* ... */ );
            // ...
            return promise;
        }
    };
});

然后传递你的论点:

$scope.getForecastByLocation = function(myName) {
    $scope.city = myName;
    Data.getApps($scope.city);
}

答案 1 :(得分:0)

就像为函数的上下文变量设置一个值一样。

<强> Services.js

服务的简单示例。

.factory('RouteService', function() {
    var route = {}; // $Object

    var setRoute_ = function(obj)
    {
        return route = obj;
    };

    var getRoute_ = function()
    {
        if(typeof route == 'string')
        {
            return JSON.parse(route);
        }

        return null;
    };

    return {
        setRoute: setRoute_,
        getRoute: getRoute_
    };
})

<强> Controllers.js

服务使用的简单示例:

.controller('RoutesCtrl', function ($scope, RouteService) {
    // This is only the set part.
    var route = {
        'some_key': 'some_value'
    };

    RouteService.setRoute(route);
})