Angular leaflet marker click

Question

I use leaflet with angular and would like to make a button clickable in a message popup. I know I have to compile the HTML, but I can't get it to work in my case since I didn't find an example with a json-request.

Any hint is very welcome!

$http.get(searchterm).then(function(articlesResponse) {

        $scope.geonamesorte = articlesResponse.data;

        var meineMarker = {};

        for ( var i = 0; i < $scope.geonamesorte.length; i++) {
            var ortObjektausListe = $scope.geonamesorte[i];

            var myobjectname = ortObjektausListe.name.replace(/[^a-zA-Z0-9]/g,'_');
            ortlat = parseFloat(ortObjektausListe.lat);
            ortlng = parseFloat(ortObjektausListe.lng);

            meineMarker[myobjectname+i] =  {
                    lat: ortlat,
                    lng: ortlng,
                    message: "<span><a href='' ng-click='dosomething()''>info</a></span>",
                    focus: false,
                    draggable: false
                };

        }

        // Marker on map
        angular.extend($scope, {
          markers: meineMarker,
            defaults:{
              tileLayer:"http://tile.stamen.com/toner-lite/{z}/{x}/{y}.png"
            }
        });

  });

score 1 · Answer 1 · edited May 23 '17 at 11:54

Ok, found the solution here: angular-leaflet-directive custom message html with angular directives in marker popup. How to?

But modified it a bit:

    var myobjectname = 'meinort';

    var meineMarker = {};
        meineMarker[myobjectname] =  {
                    lat: 0,
                    lng: 0,
                    name: 'testname',
                    message: "<span><a href='' ng-click='dosomething()'>info</a></span>",
                    focus: false,
                    draggable: false
                };

  $scope.$on('leafletDirectiveMarker.click', function(e, args) {
            // Args will contain the marker name and other relevant information
            console.log(args);
            var markerName = args.leafletEvent.target.options.name; //has to be set above
            var $container = $(args.leafletEvent.target._popup._container).find('.leaflet-popup-  content'); 
            $container.empty();
            var html = "<p> I am "+markerName +" " + args.leafletEvent.target._popup._content + "</p>", 
              linkFunction = $compile(angular.element(html)),             
              linkedDOM = linkFunction($scope); 
            $container.append(linkedDOM);
        });

score 0 · Answer 2 · answered Oct 21 '14 at 18:34

0

include a $compile service into controller then write:

meineMarker[myobjectname+i] =  {
                    lat: ortlat,
                    lng: ortlng,
                    message: $compile("<span><a href='' ng-click='dosomething()''>info</a></span>")($scope),
                    focus: false,
                    draggable: false
                };

dosomething() must be defined on the current scope

answered Oct 21 '14 at 18:34

Marian Ban

8,158
1
32
45

Unfortunately the browser hangs and I get this error: [$rootScope:infdig] 10 digest() iterations reached. Aborting! I have this controller: mytestapp.controller('KarteCtrl', ['$scope', '$log', '$http', '$compile', 'leafletData', 'leafletEvents', 'leafletBoundsHelpers', function($scope, $log, $http, $compile, leafletData, leafletBoundsHelpers, leafletEvents) { – Jo Pfeffer Oct 21 '14 at 20:15

Angular leaflet marker click

2 Answers2