Make marker message/label clickable?

[nmccready]

From @wootwoot1234 on May 25, 2014 1:37

I'm trying to make my marker popups clickable. When I use html in the marker popup the html is rendered correctly but ng-click doesn't work. Here's what I have.

 $scope.map.markers.push({
    lat: lat,
    lng: lng,
    message: '<span ng-click="openView()">' + data.results[i].locationName + '</span>',
    draggable: false
});

Anyone know what I'm doing wrong or know how to call a function when the marker popup is clicked?

Copied from original issue: tombatossals/angular-leaflet-directive#372

[nmccready]

From @tombatossals on May 25, 2014 14:56

Hi, you have to compile the message as it contains dynamic HTML, so it must be re-parsed by angular.

Take a look at threads on stackoverflow.com talking about this. There's must be an easy way for sure:

http://stackoverflow.com/questions/19845950/angularjs-how-to-dynamically-add-html-and-bind-to-controller
http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database

Hope it helps.

[nmccready]

From @wootwoot1234 on May 25, 2014 23:25

I'll check out the links and thanks for answering both of my last two posts!

Am I approaching this problem incorrectly? All I want to do is to make the marker's label clickable. Seems like something that other people would want too, right?

[nmccready]

From @nicolaspayot on September 17, 2014 9:52

Hi,

In case someone's looking for a solution to this issue:

// Here we are manually creating DOM that is not compiled by AngularJS
var title = '<span><a ng-click="hello()">' + Hello, World! + '</a> - <b>item1</b><br />item2</span>';

// Compile title DOM into a link function
var linkFn = $compile(angular.element(title));
// Return a jQuery DOM tree fully controlled by AngularJS so that ng directives will work
var popup = linkFn(scope);

var mark = L.marker(new L.LatLng(item.lat, item.lng));
// We can only display a DOM node (bug with leaflet?) so this is why we use <span>...</span> as a parent node
mark.bindPopup(popup[0]);
...
scope.hello = function() {
    alert('Hello, World!');
};

The ng-click directive's working now!