正確使用ng-submit

Question

我有一個表單將位置提交給Google的Geocoder並返回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> 

這裏是功能

$scope.convertLatLonToAddress = function(){ 
    var address = $('#search').val(); 
    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(); 
     // console.log(latitude + ' and ' + longitude); 
     $scope.center.lat = latitude; 
     $scope.center.lon = longitude; 
    } 
    }); 
}; 

由於@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> 

而且

$scope.convertLatLonToAddress = function(searchText){ 
    // var address = $('#search').val(); 
    var address = searchText; 
    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(); 
     // console.log(latitude + ' and ' + longitude); 
     $scope.center.lat = latitude; 
     $scope.center.lon = longitude; 
     $scope.$apply(); 
    } 
    }); 
}; 

Answer 1

您需要手動調用消化週期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觸發消化週期，因此前一週期運行無角異步調用和更新的範圍，其角度是不知道，當你點擊它再次再次運行消化週期不相同，但那時你以前設置的值將被選中，這就是爲什麼它需要2次點擊。要執行ng-submit，您需要一個表單元素觸發器，例如：button或input type="submit"，這會導致在表單上發生提交行爲。除非您確實打算重新定向，否則您還應從表單中刪除action。

除此之外，您可以在文本框上使用ng-model並將值傳遞給函數，而不是直接從DOM獲取值。

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

，並通過通過ng-click值作爲ng-click="convertLatLonToAddress(searchText)"並使用它自己的函數中。

爲了避免在您的控制器中使用scope.apply();，您可以將geoCoder抽象爲一個角度服務並返回一個承諾（創建延遲對象）並在您的控制器中使用該服務。

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並開始使用數據：

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

Answer 2

試試這個

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.convertLatLonToAddress = function() { 
 
    var address = $('#search').val(); 
 
    var geocoder = new google.maps.Geocoder(); 
 
    geocoder.geocode({ 
 
     'address': address 
 
    }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
     $scope.lat = results[0].geometry.location.lat(); 
 
      $scope.lon = results[0].geometry.location.lng(); 
 
     console.log($scope.lat + ' and ' + $scope.lon); 
 
     setTimeout(function(){$scope.$apply();},0) 
 
     } 
 
    }); 
 
    }; 
 
});

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
    <li> 
 
     <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> 
 
     <button ng-click="convertLatLonToAddress()">Click</button> 
 
     <br> 
 
     Lat : <input type="text" ng-model="lat"><br> 
 
     Lon : <input type="text" ng-model="lon"> 
 
     
 
     </div> 
 
    </li> 
 
    </div> 
 
</body>