angular leaflet directive - bi-directional property for marker clicked

Question

I'm using the angular-leaflet directive and I want to know which marker in my marker object array was clicked. I know that there is some way to have a bi-directional property similar to center but for selected marker.

Answer 1

You first need to configure an events object on your $scope:

angular.extend($scope, {
    events: {
      markers: {
        enable: ['click'],
        logic: 'emit'
      }
    },
    ...

And add it to the leaflet element:

<leaflet markers="markers" event-broadcast="events"></leaflet>

Then, watch for the event in your controller. The name of the marker will be available via the markerName property of the args parameter:

$scope.$on('leafletDirectiveMarker.click', function(event, args){
    console.log( $scope.markers[args.markerName]);
});

Here is a working demo: http://plnkr.co/1NCbo2zqri9GgdQxeTxJ