angularjs - 在angularjs中使用ngMap模块es6类时，使用 'this'时 'places-auto-complete'未绑定(bind)到构造函数

Question

我在执行 ngMap 时将 AngularJS 与 ES6 结合使用谷歌地图的自动完成功能模块。

/* html file */
  Enter an address: <br/>
<input places-auto-complete size=80
       ng-model="$ctrl.address"
       component-restrictions="{country:'in'}"
       on-place-changed="$ctrl.placeChanged()"/> <br/>
<div ng-show="$ctrl.place">
  Address = {{$ctrl.place.formatted_address}} <br/>
  Location: {{$ctrl.place.geometry.location}}<br/>
</div>
address : {{$ctrl.address}}
<ng-map></ng-map>

和包含组件的 javascript 文件

'use strict';
(function() {

class RateRestaurantsController {
constructor(NgMap) {
  this.NgMap = NgMap;
  this.types = "";
  this.place = "";
  this.address = "";
  this.map = {};


}

$onInit() {

  this.NgMap.getMap().then((map)=> {
    this.map = map;
  });
}

placeChanged(){
 console.log(this); // This refers the [Object] returned by google map api; not to the the constructor(as shown in the image)
  this.place = this.getPlace();
  this.map.setCenter(this.place.geometry.location);

  }

 }

angular.module('gmHotelRatingApp.rateRestaurants')
.component('rateRestaurants', {
  templateUrl: 'app/rate-restaurants/rate.restaurants.html',
  controller: RateRestaurantsController
});

})();

返回的对象: Image showing 'this' context; which is causing 'this.map' to be undefined

我希望“this.map”和“this.place”引用构造函数属性，“this.getPlaced()”引用获取自动完成数据。我怎么解决这个问题？

Answer 1

我的解决方案是:

constructor(NgMap) {

  this.ngMap = NgMap;

  var controller = this;
  this.ngMap.getMap().then((map) => {
      this.map = map;
  });

  this.myCallback = function () {
     controller.place = this.getPlace();
     controller.map.setCenter(controller.place.geometry.location);
  }


}

我知道函数必须在构造函数之外，但它对我有用。