角谷歌地圖信息窗口圖標不可單擊

Question

我在Google角形地圖中遇到問題。

如下圖所示，我在信息窗口中有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>

我的控制器（glyphClick函數）只是在做一個控制台日志。

但是，當我單擊圖標時，控制台上沒有任何輸出。

可能是什么問題？？ 如何解決呢？

請幫忙！！

Answer 1

顯然是由於無法從ui-gmap-windows子作用域訪問控制器作用域中聲明的glyphClick事件而發生的。

解

首先，我們需要引入一個附加的控制器：

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>

注意： ng-non-bindable屬性是為標簽定義的

工作實例

 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

Answer 2

從代碼中刪除ng-non-bindable 。 防止在其中附加手表功能。

<ui-gmap-windows show="show">
   <div >
       <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>