javascript - Angular 谷歌地图信息窗口图标不可点击

Question

我在 Angular 谷歌地图中遇到问题。

如下图所示，信息窗口中有 2 个图标 ( <ui-gmap-windows show="show"></ui-gmap-windows> )。

我的 DOM 是这样的

<ui-gmap-google-map id="mapDiv" center='map.center' zoom='map.zoom'>
                    <!--<ui-gmap-marker  idKey="marker.id" coords="marker.coords"></ui-gmap-marker>-->
                    <ui-gmap-markers models="markers" coords="'self'">
                        <ui-gmap-windows show="show">
                            <div ng-non-bindable>
                                <div>
                                    <label class="markerToolTipLabel">{{name}}</label>
                                    <div class="icons">
                                        <span class="glyphicon glyphicon-eye-open customGlyph" ng-mouseover="glyphClick()" ng-click="glyphClick()"></span>
                                        <span class="glyphicon glyphicon-eye-close customGlyph" ng-click="glyphClick()"></span>
                                    </div>
                                </div>
                            </div>
                        </ui-gmap-windows>
                    </ui-gmap-markers>
                </ui-gmap-google-map>

我的 Controller (glyphClick 函数)只是执行控制台日志。

但是当我单击图标时，我在控制台上没有得到任何输出。

可能是什么问题？怎么解决这个问题？

请帮忙!!

Answer 1

显然，这是因为在 Controller 作用域中声明的 glyphClick 事件无法从 ui-gmap-windows 子作用域访问。

解决方案

首先我们需要引入一个额外的 Controller :

appMaps.controller('infoWindowCtrl', function($scope) {
    $scope.glyphClick = function() {
        console.log('Button clicked!');
    }
});

然后为 ui-gmap-windows 指令指定以下布局:

 <ui-gmap-windows show="show">
                <div>
                    <div>
                        <label class="markerToolTipLabel" ng-non-bindable>{{name}}</label>
                        <div class="icons" ng-controller="infoWindowCtrl">
                            <span class="glyphicon glyphicon-eye-open customGlyph" ng-mouseover="glyphClick()" ng-click="glyphClick()"></span>
                            <span class="glyphicon glyphicon-eye-close customGlyph" ng-click="glyphClick()"></span>
                        </div>
                    </div>
                </div>
  </ui-gmap-windows>

Note: ng-non-bindable attribute is defined for a label

工作示例

var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.controller('mainCtrl', function($scope,uiGmapIsReady) {
    $scope.map = { center: { latitude: 40.1451, longitude: -99.6680 }, zoom: 4, bounds: {} };
    $scope.options = { scrollwheel: false };

    var getRandomLat = function() {
        return Math.random() * (90.0 + 90.0) - 90.0;
    };
    var getRandomLng = function () {
        return Math.random() * (180.0 + 180.0) - 180.0;
    };

    var createRandomMarker = function(i) {
        var ret = {
            latitude: getRandomLat(),
            longitude: getRandomLng(),
            name: 'Location:' + i,
            show: false,
            id: i
        };
        return ret;
    };
    
    $scope.markers = [];
    for (var i = 0; i < 200; i++) {
        $scope.markers.push(createRandomMarker(i));
    }

});

appMaps.controller('infoWindowCtrl', function($scope) {
    $scope.glyphClick = function() {
        logInfo('Glyph clicked!');
    }
});


function logInfo(message){
   console.log(message);
   //document.getElementById('output').innerHTML += message;
  alert(message);
}

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="appMaps" id="map_canvas" ng-controller="mainCtrl">
  
    <ui-gmap-google-map id="mapDiv" center='map.center' zoom='map.zoom'>
        <ui-gmap-markers models="markers" coords="'self'">
            <ui-gmap-windows show="show">
                <div>
                    <div>
                        <label class="markerToolTipLabel" ng-non-bindable>{{name}}</label>
                        <div class="icons" ng-controller="infoWindowCtrl">
                            <span class="glyphicon glyphicon-eye-open customGlyph" ng-mouseover="glyphClick()" ng-click="glyphClick()"></span>
                            <span class="glyphicon glyphicon-eye-close customGlyph" ng-click="glyphClick()"></span>
                        </div>
                    </div>
                </div>
            </ui-gmap-windows>
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>
<pre id="output"></pre>

Plunker