ng在ui gmap窗口内单击不起作用
ng-click inside ui-gmap-windows not working
ng在ui gmap窗口内点击不工作这是代码笔链接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);
不知怎么的,它无法访问层次结构中的"windowClicked"方法。
在rootScope上创建方法,并在tempalte中使用它。
在控制器中
$scope.$root.windowClicked = function () {alert('here')}
在标记中
<a ng-click="$root.windowClicked()">test</a>
这是最新的钢笔。http://codepen.io/anon/pen/qEKjjb
第一种方式
您可以使用$parent
:在ng-click
中使用$scope
声明的变量
<button ng-click="$parent.nextPage()">next</button>
这是一个正在工作的plunker。
第二条路
您可以为包含窗口的div指定一个控制器。
<div ng-controller="mainCtrl">
<button ng-click="nextPage()">next</button>
</div>
这是另一个工作的plunker
学分
Github中的人员发布
很可能与本线程中讨论的问题相同。显然,发生这种情况是因为在控制器作用域中声明的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>
工作示例
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;
}
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;
}
<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>
Plunker
相关文章:
- 使用jquery插入动态HTML后,单击不起作用
- 剑道模板在元素中单击不起作用
- ng在ui gmap窗口内单击不起作用
- 在Chrome扩展选项页面中单击不起作用的事件
- PrependTo,然后在单击不起作用时将其删除
- JavaScript 单击不起作用
- 从对象的按钮单击不起作用
- 全日历日单击不起作用(不执行任何操作)
- 检测右键单击+左键单击不起作用
- 离子无线电取消选中 ng-单击不起作用
- C# 调用成员单击“不起作用”
- JQuery 在 标签内单击不起作用
- 事件侦听器单击不起作用
- 翡翠按钮单击不起作用
- 角度路线在单击时不起作用,但再次单击不起作用
- 在 ajax 调用中加载日期选择器,然后单击不起作用
- AngularJS:ng-单击不起作用,适用于<按钮>
- JQuery .hover slidedown slideUp 工作,但 ,单击不起作用
- 多种功能在Chrome中单击不起作用
- 量角器 ID 单击不起作用