使用咖啡脚本自动完成放置后无法从 getPlace 获取价值

Posted 2023-03-03

【中文标题】使用咖啡脚本自动完成放置后无法从 getPlace 获取价值

【英文标题】：Cannot get value from getPlace after place-auto-complete using coffeescript

【发布时间】：2015-12-29 06:13:51

【问题描述】：

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

现在让我添加细节和问题。

自动完成功能正常 getPlace 函数被调用

如预期的那样使用 place_id 引发警报。但是，我不 在 sc.place 中取回数据

按 submit 时，我收到错误 this.getPlace 是 未定义。

我尝试过的事情。我在 getPlace 中使用了粗箭头 => 并得到 this.getPlace 是未定义的错误，并且在调用 getPlace 时也没有引发任何警报。

尝试查找 here 和 here 并解决了问题，但没有得到解决。 this 也有助于理解场景，但没有帮助

非常感谢您对此提供的任何帮助。提前致谢。

【参考方案1】：

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

咖啡脚本

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>

解释

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