Angular google maps click事件：无法阅读属性＆＃39;点击＆＃39;未定义的

Question

我在离子框架中使用angular google maps并尝试在点击时获取坐标。在视图中指令是这样注入的

<ui-gmap-google-map center="map.center" zoom="map.zoom" dragging="true" options="map.options" events="map.events"></ui-gmap-google-map>

这是我的控制器部分

angular.extend($scope,

  $scope.map = {
    center: {latitude: 53.902407, longitude: 27.561621 },
    zoom: 15,
    options: {
      maxZoom: 16,
      minZoom: 13,
      styles: mapStyles.bright
    },
    events: {
      click: function (mapModel, eventName, originalEventArgs) {
        $log.info("user defined event: " + eventName, mapModel, originalEventArgs);

        var e = originalEventArgs[0];
        var lat = e.latLng.lat(),
          lon = e.latLng.lng();
        console.log('You clicked here ' + 'lat: ' + lat + ' lon: ' + lon);
        //scope apply required because this event handler is outside of the angular domain
        $scope.$apply();
      }
    }
  });

事件部分基本上是从文档中的示例中复制粘贴的。但是，当我点击它时，我收到错误

我哪里出错了？

UPD 以某种方式$ scope.map.events是未定义的，虽然我可以，例如，console.log它，并看到它在错误发生之前定义。所有事件都发生同样的错误。例如，

 events: {
        tilesloaded: function (map) {
            $scope.$apply(function () {
                $scope.mapInstance = map;
                $log.info('tiles loaded');
            });
        }
 }

返回

Uncaught TypeError: Cannot read property 'tilesloaded' of undefined

在具有相同堆栈跟踪的控制台中。

Answer 1

你把两种东西放在了范围内;分配范围和扩大范围。使用对象扩展$ scope（即不是$scope.map =） 你的代码变成......

angular.extend($scope,{
  map: {
    center: {latitude: 53.902407, longitude: 27.561621 },
    zoom: 15,
    options: {
      maxZoom: 16,
      minZoom: 13,
      styles: mapStyles.bright
    },....
})

或使用作业范围

$scope.map = {
  center: {latitude: 53.902407, longitude: 27.561621 },
  zoom: 15,
  options: {
    maxZoom: 16,
    minZoom: 13,
    styles: mapStyles.bright
  },....

http://moduscreate.com/angularjs-tricks-with-angular-extend/