如何从输入中获取值并将其带到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"并点击提交，然后它会显示

  

城市未定义

当我点击“查找天气”按钮时，如何从该输入中获取城市名称并在我的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. 避免使用范围。从伟大的书AngularJS：Up and Running，Shyam Seshadri和Brad Green：

  

如果您使用1.2之前的AngularJS，您可能希望将$ scope变量注入控制器，并在其上设置变量helloMsg和goodbyeMsg。在AngularJS 1.2及更高版本中，有一种新语法controllerAs语法，它允许我们使用 this 关键字在控制器实例上定义变量，并通过HTML从控制器引用它们。

     

这优于早期语法的优点在于它使HTML显式变量或函数由哪个控制器和控制器的哪个实例提供。因此，使用复杂的嵌套UI，您不需要玩“Where's Waldo？”游戏来在代码库中查找变量。由于控制器实例存在于HTML中，因此立即变得明显。

备选方案在您的视图中使用控制器作为语法："ng-controller="WeatherController as weather"，然后在需要访问Weather Controller范围时始终引用别名，例如ng-submit="weather.sendAjax()"。

在您的控制器中，您将该功能分配给此，如this.sendAjax = function(){ \\do something }中所示。一个好的做法是将 this 分配给另一个变量，因为这个可以被覆盖。因此，在控制器的第一行，您可以执行var self=this并从此时开始将控制器称为self，如self.sendAjax = function(){ \\do something }