javascript - 使用 CoffeeScript 进行位置自动完成后无法从 getPlace 获取值

Question

我是 angularJs/coffeescript 的新手，正在尝试将其与谷歌地图集成。

目标是使用 getPlace() 自动完成后获取 place_id，并将其传递给服务方法将其存储在安全的地方，以便以后保存使用。

这是代码

咖啡代码

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>

现在使用的模块是ngMap。这是链接 angular-google-maps

现在让我添加详细信息和问题。

1. 自动完成功能运行良好
2. 调用 getPlace 函数

3. 按预期抛出带有 place_id 的警报。但是，我不将数据取回 sc.place

4. 按“提交”后，我收到错误 this.getPlace is未定义。

我尝试过的事情。我在 getPlace 中使用了粗箭头 => 并得到了 this.getPlace is undefined 错误，并且在调用 getPlace 时也没有抛出警报。

尝试查找here和 here并做了解决方案，但没有让它发挥作用。另外this对于理解场景很有用，但没有帮助

我们非常感谢任何有关此问题的帮助。提前致谢。

Answer 1

好吧..所以我做错了。经过一番研究发现了这一点。我把范围搞错了。解释在最后。

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>

说明

1. 对于必须实现的目标，必须将 place_id 分配给全局变量，然后在整个范围内可用。
2. 必须牢记 coffescript 中 => 和 -> 之间的区别。我找到了一些很好的文档here
3. 最后this回答很有帮助