This question is about angularjs-google-maps
, https://github.com/allenhwkim/angularjs-google-maps
Is there a way to use ng-click on a marker to set a variable like this? (the value of 1 is hard-coded for testing purposes). Clicking the marker currently does not seem to trigger the ng-click.
<marker ng-repeat="instance in common.instances"
position="[{{instance.lat}},{{instance.lng}}]"
ng-click="common.selectedinstance = 1">
</marker>
From their document, https://developers.google.com/maps/documentation/javascript/events,
User events (such as "click" mouse events) are propagated from the DOM to the Google Maps API. These events are separate and distinct from standard DOM events.
As far as I understand, only google maps event can be applied to google maps objects including markers, shapes, etc.
That was the bad news.
Good news is you still can use on-click
event to manipulate $scope
variables and events. There is not much difference as long as you use a function for this event.
I will keep investigating if there is work-around, so that we can use AngularJS Event into(i.e. ngMouseenger, ngMouseleave. ngMouseup, ngClick, etc
A working example using on-click is at plunkr to satisfy your requirement.
http://plnkr.co/edit/6qvS0vUYkqVHZ3t6qmn2?p=preview
This is script part
$scope.myVar = 1;
$scope.changeMyVar = function(event) {
$scope.myVar+=1;
$scope.$apply();
}
This is html part
<map zoom="11" center="[40.74, -74.18]">
<marker ng-repeat="p in positions"
position="{{p}}" title="{{p.toString()}}"
on-click="changeMyVar()">
</marker>
</map>
myVar : {{myVar}} Click a marker to increase myVar
To know more about angularjs-google-maps events, please take a look at the example about event