how to get lat/lng info for clicks in leaflet map in an angular ui

Question

I'm building a pretty basic web app with Angular.js and Leaflet.

I'm trying to get the lat/lng info from the clicks on the map and i'm having trouble finding any docs on integrating the event handlers from Leaflet into Angular.

if anyone could point me in the right direction, i'd be stoked.

the code below:

app.controller("eventcrtl", [ '$scope', function($scope) {
    $scope.$on('leafletDirectiveMap.click', function(event){
      console.log(event.latlng);
    });
}]);

doesn't work

Answer 1

To handle events, first define an events object on your scope...

angular.extend($scope, {
    events: {
      map: {
        enable: ['click', 'drag', 'blur', 'touchstart'],
        logic: 'emit'
      }
    },
    ...

and add it to your leaflet element.

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

Then, you can access latitude and longitude inside the args parameter of the click handler:

$scope.$on('leafletDirectiveMap.click', function(event, args){
    console.log(args.leafletEvent.latlng);
});

Here is a working demo: http://plnkr.co/PxRDhz6S5Svsg9FG4VRk