Proper use of ng-submit

Question

I have a form that submits a location to Google's Geocoder and returns the lat/long and changes the map. If I use ng-click on the icon it doesn't work unless I click on it twice. If I use ng-submit on the form it appends to the url and doesn't perform the task. I feel like I'm close to getting this to work but I'm lost as to what I'm doing wrong.

Below is the form

<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>

And here is the function

$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;
    } 
  }); 
};

Thanks to @PSL it's fixed! See below:

<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>

And

$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();
    } 
  }); 
};

PSL · Accepted Answer · 2015-10-30T16:34:44.670

You need to invoke the digest cycle manually inside the async call of geocode, since geocode does not run inside angular context.

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();
    } 
  });

Everytime you click, ng-click triggers the digest cycle so previous cycle runs the non angular async call and updated scope which angular is unaware, when you click on it again it runs the digest cycle again and does the same but that time the values you set previously will be picked and that is why it takes 2 clicks. For ng-submit to execute you need a form element trigger, ex: a button or input type="submit" that causes submit behavior to happen on the form. You should also remove action from form unless you really intend to do a redirection.

Apart from that you can use ng-model on the textbox and pass the value to your function as well instead of getting value from DOM directly.

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

and pass the value via ng-click as ng-click="convertLatLonToAddress(searchText)" and use it inside your function.

In order to avoid scope.apply(); in your controller you could abstract out geoCoder to an angular service and return a promise (creating deferred object) and use that service in your controller.

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;
      }

});

inject geoCoderService and get data using:

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

your suggestion of $scope.$apply(); fixed the double click. I had to add an ng-click to an which I placed around the . I couldn't get ng-submit on the form to work. In fact I still can't get hitting the enter key from not appending a ?=nameofcityyouentered to the url. Still, closer! — Alex Marple, Oct 30 '15 at 15:52
@AlexMarple if you want ng-submit to work you can use `` and style it accordingly. What happens if you enter the enter key on the textbox, it should also work? — PSL, Oct 30 '15 at 15:57
So I have ng-submit on the form and I also have ng-click on an anchor wrapping the icon. The click on the anchor works perfectly. If you hit enter (even with a visually hidden button) it adds ?=whateverCityYouEntered to the url. Thoughts? Thanks for your help btw. — Alex Marple, Oct 30 '15 at 16:21
@AlexMarple i dont understand why do you need form action to be populated? remove action from form. — PSL, Oct 30 '15 at 16:24
@AlexMarple one more tip. Instead of accessing geoCoder in your controller, you could create a service. Please see my answer update. — PSL, Oct 30 '15 at 16:34

score 0 · Answer 2 · answered Oct 30 '15 at 15:03

Try this

 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>

Proper use of ng-submit

2 Answers2