Question

ng-click ui-gmap-windows内部无效... 这是codepen链接http://codepen.io/aoakeson/pen/ZYLJeyhttp://codepen.io/aoakeson/pen/ZYLJey

有关如何解决此问题的任何建议......

这是html代码：

<ui-gmap-google-map center='map.center' zoom='map.zoom' draggable="true">
             <ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'" click="'onClick'">

                 <ui-gmap-windows show="show" ng-cloak>
                     <div class="lp_tuxtla" >
        <div >
            <a ng-click="nextpage()">click here</a>
            <h3 ng-non-bindable >{{title}}</h3>
            <h4 ng-non-bindable>{{loc}}</h4>
        </div>
        <span class="right_arw"></span>
        <span class="down_arw"></span>
    </div>

          <!--  <div ng-non-bindable >{{title}}</div>-->
        </ui-gmap-windows>

    </ui-gmap-markers>
            </ui-gmap-google-map>

这里有javascript代码：

$scope.map = {center: {latitude: 40.1451, longitude: -99.6680 }, zoom: 4, bounds: {}};
    $scope.options = {scrollwheel: false};
    var createRandomMarker = function (i, bounds, idKey) {
        var lat_min = bounds.southwest.latitude,
            lat_range = bounds.northeast.latitude - lat_min,
            lng_min = bounds.southwest.longitude,
            lng_range = bounds.northeast.longitude - lng_min;

        if (idKey == null) {
            idKey = "id";
        }

        var latitude = lat_min + (Math.random() * lat_range);
        var longitude = lng_min + (Math.random() * lng_range);
        var ret = {
            latitude: latitude,
            longitude: longitude,
            title: 'm' + i,
            show: false
        };
        ret.onClick = function() {
            console.log("Clicked!");
            ret.show = !ret.show;
        };
        ret[idKey] = i;
        return ret;
    };
    $scope.randomMarkers = [];
    // Get the bounds from the map once it's loaded
    $scope.$watch(function() { return $scope.map.bounds; }, function(nv, ov) {
        // Only need to regenerate once
        if (!ov.southwest && nv.southwest) {
            var markers = [];
            for (var i = 0; i < 50; i++) {
                markers.push(createRandomMarker(i, $scope.map.bounds))
            }
            $scope.randomMarkers = markers;
        }
    }, true);

Answer 1

不知何故，它无法到达＆＃39; windowClicked＆＃39;层次结构中的方法。

在rootScope上创建方法并在tempalte中使用它。

在控制器中

$scope.$root.windowClicked = function () {alert('here')}

标记

<a ng-click="$root.windowClicked()">test</a>

这是更新的笔。 http://codepen.io/anon/pen/qEKjjb

Answer 2

第一种方式

您可以使用$scope在ng-click中使用$parent声明的变量：

<button ng-click="$parent.nextPage()">next</button>

这是working plunker。

第二种方式

您可以将控制器分配给包含窗口的div。

<div ng-controller="mainCtrl">
   <button ng-click="nextPage()">next</button>
</div>

这是另一个working plunker

积分

Github issue

中的人

Answer 3

很可能是this thread中讨论过的问题。显然，它发生在控制器范围内声明的nextpage事件无法从ui-gmap-windows子范围访问。

以下解决方案对我有用：

首先我们需要引入一个额外的控制器：

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

然后指定以下布局：

<ui-gmap-windows show="show">
      <div ng-controller="infoWindowCtrl">
          <span ng-non-bindable>{{title}}</span>
          <button ng-click="showInfo()">Show info</button>
       </div>
</ui-gmap-windows>

工作示例

＆＃13;

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(),
            title: 'm' + i,
            show: false,
            id: i
        };
        return ret;
    };
    $scope.onClick = function(marker, eventName, model) {
        logInfo("Marker clicked!");
        model.show = !model.show;
    };
    $scope.markers = [];
    for (var i = 0; i < 200; i++) {
        $scope.markers.push(createRandomMarker(i));
    }

});

appMaps.controller('infoWindowCtrl', function($scope) {
    $scope.showInfo = function() {
        logInfo('Button clicked!');
    }
});


function logInfo(message){
   console.log(message);
   document.getElementById('output').innerHTML += message;
}

＆＃13;

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
}

#map_canvas {
    position: relative;
}

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

＆＃13;

<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>
<div ng-app="appMaps" id="map_canvas" ng-controller="mainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
            <ui-gmap-markers models="markers" coords="'self'" icon="'icon'" click="onClick">
                <ui-gmap-windows show="show">
                    <div ng-controller="infoWindowCtrl">
                        <span ng-non-bindable>{{title}}</span>
                        <button ng-click="showInfo()">Show info</button>
                    </div>
                </ui-gmap-windows>
            </ui-gmap-markers>
        </ui-gmap-google-map>
</div>
<pre id="output"></pre>

＆＃13;

Plunker

在ui-gmap-windows内部单击ng-click无法正常工作

3 个答案:

第一种方式

第二种方式

积分