如何使用组件在ngMap标记上添加点击事件？

Question

我正在使用ngMap库在AngularJS中集成谷歌地图。

我在我的组件控制器中使用on.click遇到了麻烦。组件代码：

(function(){
    angular.module('map')
        .component('mapComponent', {
            templateUrl: 'app/mapComponent/map.html',
            controller: mapController
        });

    mapController.$inject = ['NgMap', '$state'];

    function mapController(NgMap, $state){
        var ctrl = this;
        NgMap.getMap().then(function (map) {
            ctrl.map = map;
        });
        ctrl.markers = [
            {id: 1, lat: 56.951, lng: 24.10, count: 2},
            {id: 2, lat: 56.931, lng: 24.00, count: 2},
            {id: 3, lat: 56.947, lng: 24.14, count: 3},
            {id: 4, lat: 56.924, lng: 24.09, count: 2},
            {id: 5, lat: 56.936, lng: 24.12, count: 2},
            {id: 6, lat: 56.955, lng: 24.10, count: 4},
        ];

        ctrl.openModal = function(event){
            $state.go('welcome');
        }
    }
})();

和模板：

<div class="map_wrapper">
    <ng-map default-style="false" 
            center="current-location"
            geo-fallback-center="4.672585, -54.059525">
        <marker ng-repeat="m in $ctrl.markers" position="{{m.lat}},{{m.lng}}" on-click="$ctrl.openModal"></marker>
    </ng-map>
</div>

但我得到了错误：

TypeError: Cannot read property '1' of null
    at new a (https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js:25:28363)
    at Object.getEvents (https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js:25:28734)
    at Object.a [as link] (https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js:25:18317)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:16:230
    at ia (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:81:35)
    at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:66:176)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:58:429)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:58:67
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:62:430
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:59:422) <marker ng-repeat="m in $ctrl.markers" position="{{m.lat}},{{m.lng}}" on-click="$ctrl.openModal" class="ng-scope">

尝试了各种方法，并搜索了类似的问题，但没有成功。在示例页面中，总是使用“旧的”控制器方法。

Answer 1

由于以下行的click事件声明无效，您将收到此错误：

on-click="$ctrl.openModal"
                ^^^^^^^^^
missing parentheses

标记click事件声明应包括括号：on-click="openModal()"

示例

​

(function () {
    angular.module('mapApp', ['ngMap'])
        .controller('mapCtrl', function ($scope,NgMap) {
            NgMap.getMap().then(function (map) {
                $scope.map = map;
            });
            $scope.markers = [
                { id: 1, lat: 56.951, lng: 24.10, count: 2 },
                { id: 2, lat: 56.931, lng: 24.00, count: 2 },
                { id: 3, lat: 56.947, lng: 24.14, count: 3 },
                { id: 4, lat: 56.924, lng: 24.09, count: 2 },
                { id: 5, lat: 56.936, lng: 24.12, count: 2 },
                { id: 6, lat: 56.955, lng: 24.10, count: 4 },
            ];

            $scope.openModal = function (e) {
                console.log(e.latLng.toString());
            }
        });
})();

 <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
    
    
<div ng-app="mapApp" ng-controller="mapCtrl">
   
    <ng-map default-style="false" 
            center="56.9713958,23.9898323" zoom="10">
        <marker ng-repeat="m in markers" position="{{m.lat}},{{m.lng}}" on-click="openModal($event)"></marker>
    </ng-map>
   
</div>    

​