angular leaflet directive customized popup

Question

I have a question about angular leaflet directive customized popup using compile template. I am using ionic 1.2.4, angular leaflet directive 0.10.0 and leaflet 1.0.0rc-1.

In the controller, I wrote the following code.

var marker = {
            type: markerType,
            lat: myLatlng[0],
            lng: myLatlng[1],
            id: id,
            getMessageScope: function () { return $scope; },
            message: "<a ng-click=\"alert()\">howdy</a>",
            compileMessage: true
        };

        $scope.markersArray.push(marker);


$scope.alert = function(){
            console.log("hahahahaha[");
        }

Here is the fiddle link: http://jsfiddle.net/caiczcz/m7g8Le0L/1/

Although the link is presented in the popup, but the click event is never triggered, I think that the problem might come from the compile process. Any advice is appreciated. THX.

Answer 1

In Angular-leaflet-directive,

 $timeout(function(){
             $compile(marker._popup._contentNode)(markerScope);
           });

this will introduce a flicker issue, which can be resolved by adding a timeout to the popup's showing up or adding some animation, .etc.