Cannot get value from getPlace after place-auto-complete using coffeescript

Question

I am a newbie on angularJs/coffeescript and is trying to integrate it with google maps.

Objective, is to get the place_id after auto-complete using getPlace() and store it somewhere safe by passing it on to a service method so that it can be saved used later.

Here is the code

coffeecode

class SomeController

constructor: (@$scope, @$log, @$location, @SomeService) ->

    @listing = {}


    getPlace: (place) ->
          place = @getPlace()
          alert(place.place_id)
          return place

    doSomethingMore: () ->

          @variable.whereGeo =  @getPlace().place_id
          alert(@listing.whereGeo)

    @SomeService.someFunction(@listing)  //save the place id somewhere 

controllersModule.controller('SomeController', SomeController)

HTML

<div ng-controller="SomeController as sc">

<div class="col-sm-3">
            <input places-auto-complete type="text" class="form-control" name="where" id="where" placeholder=""
                   ng-model="sc.search.where"  on-place-changed="sc.getPlace(place)">
        </div>

        <div ng-show= "sc.place.length">
            <p>Ideally something should Appear here after autocomplete </p>
            place_id = {{ sc.place }} <br/>

        </div>
<div class="col-sm-offset-4 col-sm-2 col-xs-1 text-right">
                <button ng-click="sc.doSomethingMore()" class="btn btn-success btn-lg" id="btn_create">Submit</button>
            </div>
 </div>

Now the module used is ngMap. Here is the links angular-google-maps

Now let me add the details and the problem.

The autocomplete works fine
The getPlace function gets called
The alert is thrown with the place_id as expected. But , i dont get the data back in sc.place
On pressing submit , I get the error this.getPlace is undefined.

Things I have tried. I have used the fat arrow => in getPlace and got this.getPlace is undefined error and no alert is thrown on calling the getPlace either.

Tried looking up here and here and did the solution but didn't get it to work. Also this was useful to understand the scenario but didn't help

Any help regarding this is highly appreciated. Thanks in advance.

score 0 · Accepted Answer · edited May 23 '17 at 11:58

Ok.. So I was doing it wrong. After some research found this. I had got the scope all wrong. Explanation at the end.

Coffeescript

class SomeController

constructor: (@$scope, @$log, @$location, @SomeService) ->

@listing = {}
@place
    autocomplete_options = {
      types: ['geocode'] 
    }

    autocomplete = new google.maps.places.Autocomplete(document.getElementById('where'), autocomplete_options)

    google.maps.event.addListener autocomplete, 'place_changed', =>
        place = autocomplete.getPlace()
        console.log(place.place_id)
        @$scope.$apply =>
            @$scope.place = place.place_id




doSomethingMore: () ->

      @liating.whereGeo =  @$scope.place // now place id is available in scope 
      alert(@listing.whereGeo)

@SomeService.someFunction(@listing)  //save the place id somewhere 

controllersModule.controller('SomeController', SomeController)

HTML

<div ng-controller="SomeController as sc">

<div class="col-sm-3">
            <input type="text" class="form-control" name="where" id="where" placeholder=""
                   ng-model="sc.search.where">
        </div>


<div class="col-sm-offset-4 col-sm-2 col-xs-1 text-right">
                <button ng-click="sc.doSomethingMore()" class="btn btn-success btn-lg" id="btn_create">Submit</button>
            </div>
 </div>

Explanation

For what had to be achieved , the place_id had to be assigned to a global variable and then made available throughout scope.
The difference between => and -> in coffescript has to be kept in mind. I found some good documentation here
Finally this answer was helpful

Cannot get value from getPlace after place-auto-complete using coffeescript

1 Answers1