Javascript 正确使用ng提交

我有一个表单，它向谷歌的地理编码器提交一个位置，返回lat/long并更改地图。如果我使用ng单击图标，除非我单击两次，否则它不会工作。如果我在表单上使用ng submit，它将附加到url，并且不执行任务。我觉得我很快就可以让它发挥作用了，但我不知道我做错了什么

以下是表格

<li>
  <form action="" class="search-form" ng-submit="convertLatLonToAddress()">
      <div class="form-group has-feedback">
      <label for="search" class="sr-only">Search</label>
      <input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name">
          <i class="fa fa-search form-control-indicator"></i>                        
    </div>
  </form>
</li> 

多亏了@PSL，它被修复了！见下文：

<li>
  <form class="search-form" ng-submit="convertLatLonToAddress(searchText)">
    <div class="form-group has-feedback">
      <label for="search" class="sr-only">Search</label>
      <input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name" ng-model="searchText">
      <button style="visibility: hidden"></button>
        <a ng-click="convertLatLonToAddress(searchText)">
          <i class="fa fa-search form-control-indicator"></i>                        
        </a>
    </div>
  </form>
</li> 

---

您需要在

geocode

的异步调用中手动调用摘要循环，因为

geocode

不会在角度上下文中运行

geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      // console.log(latitude + ' and ' + longitude);
      $scope.center.lat = latitude;
      $scope.center.lon = longitude;
      $scope.$apply();
    } 
  }); 

每次单击，

ng click

都会触发摘要循环，因此前一个循环会运行angular不知道的非angular异步调用和更新范围，当再次单击时，它会再次运行摘要循环并执行相同的操作，但此时将拾取之前设置的值，这就是为什么需要单击两次。要执行

ng submit

，您需要一个表单元素触发器，例如：导致表单上发生提交行为的

按钮

或

input type=“submit”

。您还应该从表单中删除

操作

，除非您确实打算执行重定向

除此之外，您还可以在文本框上使用

ng model

，并将值传递给函数，而不是直接从DOM获取值

<input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name" ng-model="searchText">

注入

geoCoderService

并使用以下方法获取数据：

 geoCoderService.getCoordinates(address).then(function(coordinates){
     //populate it
 }).catch(function(errorStatus){  /*ooops Error*/ })

试试这个

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.convertlontoAddress=函数（）{
var address=$（'#search'）.val（）；
var geocoder=new google.maps.geocoder（）；
地理编码({
“地址”：地址
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
$scope.lat=results[0]。geometry.location.lat（）；
$scope.lon=results[0].geometry.location.lng（）；
log（$scope.lat+'和'+$scope.lon）；
setTimeout（函数（）{$scope.$apply（）；}，0）
}
});
};
});


搜寻
点击


拉丁语：

朗：

您对$scope的建议。$apply（）；修复了双击的问题。我必须添加一个ng点击到一个我放在周围的。我无法让ng在表单上提交工作。事实上，我仍然无法通过不在url中添加？=nameofcityyouenter来点击回车键。再近一点@Alexmaple如果你想提交工作，你可以使用
并相应地设置样式。如果在文本框中输入enter键，会发生什么情况？因此，我在表单上有ng submit，我也有ng单击包装图标的锚。点击锚点可以完美地工作。如果按enter键（即使是视觉隐藏的按钮），它会将？=您输入的内容添加到url中。思想？谢谢你的帮助，顺便说一句。@AlexMarple我不明白你为什么需要填充表单操作？从表单中删除动作。这是一个很好的提示。我想我会把它合并起来的！
<input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name" ng-model="searchText">

myApp.service('geoCoderService', ['$q', function($q){
      this.getCoordinates = function(address){
          var defer = $q.defer();
           var geocoder = new google.maps.Geocoder();

          geocoder.geocode( { 'address': address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             var latitude = results[0].geometry.location.lat();
             var longitude = results[0].geometry.location.lng();
             return defer.resolve({latitude :latitude , longitude :longitude });
           } 
          //faliure
          defer.reject(status);
       }); 
          return defer.promise;
      }

});

 geoCoderService.getCoordinates(address).then(function(coordinates){
     //populate it
 }).catch(function(errorStatus){  /*ooops Error*/ })