1

I'm using angular-leaflet-directive and am trying to make my marker messages clickable. When I use html in the marker message 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 message is clicked?

David
  • 9,635
  • 5
  • 62
  • 68
Dev01
  • 13,292
  • 19
  • 70
  • 124

2 Answers2

2

You can now easily use Angular templates in a popup message:

$scope.openView = function() { ... };

$scope.map.markers.push({
    lat: lat,
    lng: lng,
    message: '<span ng-click="openView()">' + data.results[i].locationName + '</span>',
    getMessageScope: function() {return $scope; }
});
David
  • 9,635
  • 5
  • 62
  • 68
0

You are in big trouble :P. The only way to make new angular code work out of the box is by using the $compile service. I don't mean to be rude, but if i were in your place, i'd try to find another approach like using an ng-repeat and changing your logic.

Anyway, the compile service works somewhat like this but at least personally i'd try to find a different solution:

angular.module('sampleApp', [])
  .directive('howCompileWorks', ['$compile', function($compile){
    return {
      template: '',
      restrict: 'A',
      link: function (scope, element, attr) {
        scope.shout = function(){
          alert("I SAID HELLO!!");
        }
        element.html('<span ng-click="shout()">Hello yo!</span>');

        $compile(element.contents())(scope);
      }
    }
  }]);

Cheers

HeberLZ
  • 12,715
  • 4
  • 22
  • 24
  • Thanks for the response. I agree, I don't want a messy solution. I'm just looking for a way to make the label of markers clickable. I'm not sure what you mean about using ng-repeatbut I'm interested. Do you mind explaining how I can use it to make the marker label clickable? Thanks. – Dev01 May 25 '14 at 23:36
  • I was thinking something like js without html: $scope.map.markers.push({ lat: lat, lng: lng, message: data.results[i].locationName, draggable: false }); – HeberLZ May 26 '14 at 12:12
  • THIS ONE IS THE COMMENT: I was thinking something like this but i don't know if it can apply to your project. At js change this line:: message: data.results[i].locationName At your view add this:: {{marker.message}} – HeberLZ May 26 '14 at 12:18