这里我展示了一些信息窗口的一些城市，但是在那个信息窗口我有一个按钮。如果我点击那个按钮（获取），它应该将值传递给函数。任何人帮助我
现在，当我点击该按钮时，我的演示程序中没有显示任何内容 https://docs.python.org/2/tutorial/datastructures.html
angular.module('mapsApp', [])
.controller('MapCtrl', ['$scope', '$http', '$location', '$window', '$compile', function($scope, $http, $location, $window, $compile) {
var cities = [{
id: '02jdjd',
city: 'Toronto',
desc: 'World Largest city,This city is live,This is the second best city in the world',
lat: 43.7000,
long: -79.4000,
icon:'http://labs.google.com/ridefinder/images/mm_20_purple.png'
}, {
id: '02jdjdsss',
city: 'New York',
desc: 'coastal area,This city is aiiiiite, ',
lat: 40.6700,
long: -73.9400,
icon:'http://labs.google.com/ridefinder/images/mm_20_red.png'
}, {
id: '02jdjdsssws',
city: 'Chicago',
desc: 'This is the second best city in the world',
lat: 41.8819,
long: -87.6278,
icon:'http://labs.google.com/ridefinder/images/mm_20_green.png'
}, {
id: '02jdjdsssz',
city: 'Los Angeles',
desc: 'This city is live,coastal area,incredible city',
lat: 34.0500,
long: -118.2500,
icon:'http://labs.google.com/ridefinder/images/mm_20_blue.png'
}, {
id: '02jdjdssq',
city: 'Las Vegas',
desc: 'the most populous city,This city is live,This city is aiiiiite',
lat: 36.0800,
long: -115.1522,
icon:'http://labs.google.com/ridefinder/images/mm_20_yellow.png'
}];
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function(info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.city,
icon: info.icon
});
marker.content = '<div><h2>'+marker.title+'</h2><input type="button" value="get" ng-click="get(\'' + info.id + '\')"/>' + '<div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.city + '</div></div>';
// marker.content = "<div><h2>" + marker.title + "</h2><input type='button' value='get' ng-click='get(" + info.id + ")'/>" + "<div class='infoWindowContent'>" + info.desc + "</div><div class='infoWindowContent'>" + info.city + "</div></div>";
google.maps.event.addListener(
marker,
'click', (function(marker, $scope) {
return function() {
var compiled = $compile(marker.content)($scope);
$scope.$apply();
infoWindow.setContent(compiled[0]);
infoWindow.open($scope.map, marker);
};
})(marker, $scope)
);
$scope.markers.push(marker);
}
$scope.get = function(city) {
console.log(city);
//alert("from $scope.get id : "+id);
}
for (i = 0; i < cities.length; i++) {
createMarker(cities[i]);
}
$scope.openInfoWindow = function(e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
$scope.clearMarkers = function() {
for (var i = 0; i < $scope.markers.length; i++) {
$scope.markers[i].setMap(null);
}
$scope.markers.length = 0;
}
$scope.filterMarkers = function() {
//1.select filtered cities
var filteredCities;
var cityDesc = $scope.data.singleSelect;
if (cityDesc == '0') {
filteredCities = cities;
} else {
filteredCities = cities.filter(function(c) {
if (c.desc == cityDesc)
return c;
});
}
//2.update markers on map
$scope.clearMarkers();
for (i = 0; i < filteredCities.length; i++) {
createMarker(filteredCities[i]);
}
}
}]);
//]]>#map {
height: 420px;
width: 600px;
}
.infoWindowContent {
font-size: 14px !important;
border-top: 1px solid #ccc;
padding-top: 10px;
}
h2 {
margin-bottom: 0;
margin-top: 0;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<br>
<br>
<label>Filter Marker </label>
<br>
<select name="singleSelect" ng-model="data.singleSelect" ng-change="filterMarkers()">
<option value="0">all</option>
<option value="This is the best city in the world">This is the best city in the world</option>
<option value="This city is aiiiiite">This city is aiiiiite</option>
<option value="the most populous city">the most populous city</option>
<option value="This city is live">This city is live</option>
<option value="coastal area">coastal area</option>
<option value="World Largest city">World Largest city</option>
<option value="incredible city">incredible city</option>
</select>
<br>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
<a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
</div>
</div>
答案 0 :(得分：2)
这里我应该猜测
小解释：问题是，你试图从自定义html调用angular函数，它从未链接到angular，所以你必须先编译它。
基本上 $ compile（marker.content）（$ scope）;
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
#map {
height: 420px;
width: 600px;
}
.infoWindowContent {
font-size: 14px !important;
border-top: 1px solid #ccc;
padding-top: 10px;
}
h2 {
margin-bottom: 0;
margin-top: 0;
}
</style>
<script>
//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', ['$scope', '$http', '$location', '$window', '$compile', function($scope, $http, $location, $window, $compile) {
var cities = [{
id: '1',
city: 'Toronto',
desc: 'This is the best city in the world!',
lat: 43.7000,
long: -79.4000
}, {
id: '2',
city: 'New York',
desc: 'This city is aiiiiite!',
lat: 40.6700,
long: -73.9400
}, {
id: '3',
city: 'Chicago',
desc: 'This is the second best city in the world!',
lat: 41.8819,
long: -87.6278
}, {
id: '4',
city: 'Los Angeles',
desc: 'This city is live!',
lat: 34.0500,
long: -118.2500
}, {
id: '5',
city: 'Las Vegas',
desc: 'This city is live!',
lat: 36.0800,
long: -115.1522
}];
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function(info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.city
});
marker.content = '<div><h2>'+marker.title+'</h2><input type="button" value="get" ng-click="get(' + info.id + ')"/>' + '<div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.city + '</div></div>';
google.maps.event.addListener(
marker,
'click', (function(marker, $scope) {
return function() {
var compiled = $compile(marker.content)($scope);
$scope.$apply();
infoWindow.setContent(compiled[0]);
infoWindow.open($scope.map, marker);
};
})(marker, $scope)
);
$scope.markers.push(marker);
}
$scope.get = function(id) {
console.log(id);
//alert("from $scope.get id : "+id);
}
for (i = 0; i < cities.length; i++) {
createMarker(cities[i]);
}
$scope.openInfoWindow = function(e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
$scope.clearMarkers = function() {
for (var i = 0; i < $scope.markers.length; i++) {
$scope.markers[i].setMap(null);
}
$scope.markers.length = 0;
}
$scope.filterMarkers = function() {
//1.select filtered cities
var filteredCities;
var cityDesc = $scope.data.singleSelect;
if (cityDesc == '0') {
filteredCities = cities;
} else {
filteredCities = cities.filter(function(c) {
if (c.desc == cityDesc)
return c;
});
}
//2.update markers on map
$scope.clearMarkers();
for (i = 0; i < filteredCities.length; i++) {
createMarker(filteredCities[i]);
}
}
}]);
//]]>
</script>
</head>
<body>
<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<br>
<br>
<label>Filter Marker </label>
<br>
<select name="singleSelect" ng-model="data.singleSelect" ng-change="filterMarkers()">
<option value="0">all</option>
<option value="This is the best city in the world!">This is the best city in the world!</option>
<option value="This city is aiiiiite">This city is aiiiiite</option>
<option value="This is the second best city in the world!">This is the second best city in the world!</option>
<option value="This city is live!">This city is live!</option>
</select>
<br>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
<a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
</div>
</div>
</body>
</html>