Angular.js googlemap信息窗口按钮单击没有传递值吗？

Question

Here i am showing some cities with infowindow everything is working but in that info window i have one button.if i click that button(get) it should pass the value to function .any one help me out

now when i click that button nothing is showing in console my demo demo

 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> 

Answer 1

Here this should do i guess

little explanation: The issue is, you are trying to call angular function from custom html, which was never linked to angular , so you have to compile it first.

Basically $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>