Communicate mapbox.js lat/lng to Angular controllers

[louh]

So I can do something in plain Javascript like this:

map.on('click', function (e) {
    console.log('Clicked map lat/lng: ' + e.latlng)
    // Returns 'Clicked map lat/lng: LatLng(36.17419, -115.14865)'
}

Basically, getting Lat/Lng points out of Mapbox/Leaflet is pretty easy. But now, how do I communicate this to an Angular controller?

Most of Angular relies on binding directly to DOM elements via attributes, which would mean interaction with a map element would bypass mapbox.js completely, as far as I understand. I'm not sure I've ever seen anything about how Angular scopes are accessible outside of their controllers, which I imagine would be anti-Angular anyway (because of possible scope pollution).

cc @rclosner

[lovehandle]

@louh haven't looked into this yet, but would it make sense to have two hidden input elements that you bind to instead? then you could have an 'on-click' map event that populates those inputs (which are bound to the controller).

[louh]

Interesting. This seems like a pretty effective solution; let me give that a try.

[louh]

...so close. when jQuery updates the input boxes, it doesn't automatically update Angular (only human interaction does that) - there is apparently a way to force Angular to look for changes, but have to look into it more.

[lovehandle]

@louh want to post your changes to the branch and link to the line of code you're working on? would this work:

jQuery(element).bind('change', function () {
  angular.element(element).triggerHandler('change');
})

a little hacky, but it may do the trick.

[louh]

@rclosner That didn't seem to work. I tried a bunch of other hacky things, like:

• Manually setting the 'ng-pristine' class to 'ng-dirty'
• Manually triggering a keydown event on the input field
• Calling $scope.$apply or $scope.$digest inside either a directive or in the controller

Finally I tried various forms of:

• Binding an ng-click event to the controller and trying to get it to pay attention to the content inside of the input field

THAT WORKED. I was thinking too hard. Essentially, the solution is to also bind a click event to the controller, then, during the callback function, manually assigning the input fields to the model.

Whew!!!!