Angular custom flyer markers (using angular directives)

Question

I am trying to create a "flyer marker" using the angular directive. For design purposes, we separate the presentation and the model so that different people can work with different parts of the application. My problem is most likely a more "problem" problem than the "flyer" problem. I am trying to pass an object to be used in the angular directive, while I am adding markers to the "$ scope" in the controller. This directive, "in my application, is the only tag in my" message "property for each marker object that will be displayed on the map. It has the" estacao "attribute, which in Portuguese matches the" station ".

So my code is here:

        angular.forEach($scope.estacoes, function(estacao) {
            $scope.markers.push({
                lat: estacao.latitude, 
                lng: estacao.longitude, 
                message: "<popup estacao='estacoes[" + i + "]'></popup>"
            });
            i++;
        });

http://plnkr.co/edit/evaQpqGZUz39Y7MNqbo7?p=preview

The problem is that my "estacao" is null when the directive is processed.

Can someone help me figure out what's going on?

Answer 1

"Auto" compilation of a pop-up message (from the leaflet directive) uses the root area. Therefore, you need to assign your estacoes answer to the root area:

promiseEstacoes.then(function(estacoes) {
   $rootScope.estacoes = estacoes.estacoes;
   ...
}

http://plnkr.co/edit/OkQcth2zNrEdO2rgwBv8?p=preview

Answer 2

With the latest versions of the angular-leaflet directive, you can specify the area that will be used when sending messages:

$scope.markers.push({
    lat: estacao.latitude, 
    lng: estacao.longitude,
    getMessageScope: function() { return $scope; }
    message: "<popup estacao='estacoes[" + i + "]'></popup>"
});