2017-07-03 172 views
1

我目前正在開發一個項目以幫助我更好地理解angularjs!我目前堅持如何從控制器傳遞參數到服務。如何將param從控制器傳遞到AngularJs中的服務

在我的程序中,當用戶輸入一個輸入點擊一個按鈕時,我創建了一個名爲「GetForecastByLocation」的函數。從那裏我想接受他們的輸入,然後將它傳遞給service.js中的http調用。

最初,$ http.get是一個很長的API網址字符串,但我搜索了一下,似乎我應該在嘗試更改字符串的一部分時使用參數。截至目前,我知道參數被硬編碼到一個特定的城市,但我想要接受新的輸入並將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; 
     } 
    } 
}); 
+0

爲什麼不加一個參數'getApps'?該工廠看起來像'getApps:function(city){...'和調用網站像'Data.getApps($ scope.city)' – Will

+0

hi @wilusdaman!對不起,但我對angularjs很陌生。如果你能顯示完整的代碼/詳細說明,我將不勝感激!謝謝! //在你的代碼中,我是否仍然需要params?如果我理解正確,函數(城市)的值填入q:city,對不對? – hiswendy

回答

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

謝謝!我知道這將起作用,因爲我嘗試傳遞一個參數,並且它改變了。我希望這可以問,但我有跟進問題。更早的時候,我沒有顯示我的整個controller.js代碼,現在我已經更新了它,但是點擊按鈕後調用的函數並沒有將城市發送到服務。我想這可能是因爲我把getForecastbyLocation放在控制器中。我認爲這是錯誤的地方,但我不知道該把它放在哪裏。你有任何建議/建議嗎?再一次感謝你! – hiswendy

+0

你的'ng-click'是什麼樣的? – Will

+0

它目前看起來像這樣: SUBMIT' – hiswendy

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); 
}) 
相關問題