如何從輸入中獲取價值並將其帶到AJAX請求鏈接？

Question

所以我已經用angularJS完成了這個AJAX請求：

http://jsfiddle.net/c0Lkja0h/1/

當我使用例如$http.get('http://api.wunderground.com/api/KEY/forecast/geolookup/conditions/q/San_Francisco.json')之類的鏈接時（鏈接中沒有'+ city +' ）效果很好。 但是，當我添加該變量時，將其添加到ng-model="city"並點擊Submit，然后它說

沒有定義城市

當我單擊“查找天氣”按鈕時，如何使其從輸入中獲取城市名稱並在newAJAXreq函數中使用它？ 默認鏈接將是靜態鏈接（當用戶首次訪問該站點時），並且如果用戶需要，從輸入中提取該城市之后，這也是很酷的。 謝謝！

Answer 1

您的方法有幾處錯誤。

1. 不要命名您的控制器。 它應該是一個匿名函數，將要注入的模塊作為參數，例如.controller(function($http){ //do something }); 或.controller(['$http',function($http){ //do something }])以避免在縮小js文件時丟失對變量的引用。
2. 在控制器內部，定義所需的函數作為城市的參數，例如$scope.sendAjax = function(city){ //do something } 。 在您看來，您將僅使用需要ng-submit="sendAjax(city)"的參數來調用此函數
3. 避免使用范圍。 摘自Shyam Seshadri和Brad Green的精彩著作《 AngularJS：Up and Running》：

如果您在1.2之前使用AngularJS，則可能希望將$ scope變量注入到控制器中，並在其上設置變量helloMsg和goodbyeMsg。 在AngularJS 1.2和更高版本中，有一個新語法，即controllerAs語法，它使我們可以使用this關鍵字在控制器實例上定義變量，並通過HTML從控制器中引用它們。

與早期語法相比，此方法的優勢在於，它可以在HTML中明確指出哪個變量或函數由哪個控制器和哪個控制器實例提供。 因此，使用復雜的嵌套UI，您無需玩“ Waldo在哪里？”游戲就可以在代碼庫中找到變量。 由於控制器實例存在於HTML中，因此立即變得顯而易見。

另一種方法是在您的視圖中使用控制器作為語法： "ng-controller="WeatherController as weather" ，然后在您需要訪問Weather Controller范圍時始終引用別名，例如ng-submit="weather.sendAjax()" 。

在您的控制器中，您將為此分配功能，如this.sendAjax = function(){ \\\\do something } 。 一個好的做法是，以該分配給另一個變量，因為這樣可以得到覆蓋。 因此，在控制器的第一行中，您可以執行var self=this並將self.sendAjax = function(){ \\\\do something }的控制器稱為self，就像self.sendAjax = function(){ \\\\do something }