4

I'm trying to create a "leaflet marker" using an angular directive. For design purposes, we separate the presentation and the model so different persons can work on different parts of the application. My issue, more likely, is more a "scope" problem than a "leaflet" problem. I'm trying to pass an object to be used in the angular directive, while I'm adding the markers on "$scope", in the controller. That directive, "" in my app, is the only tag in my "message" property on each marker object to be presented in the map. It has an attribute "estacao" which in portuguese is the same as "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 seams to be that my "estacao" is null when the directive is processed.

Can anyone help me to figure out what is happening?

David
  • 9,635
  • 5
  • 62
  • 68
Alex Gouvêa Vasconcelos
  • 147
  • 2
  • 11

2 Answers2

2

The 'auto' compile of the popup message (from the leaflet directive) uses the root scope. So you need to assign your response estacoes to the root scope:

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

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

Rob
  • 5,353
  • 33
  • 34
  • Thank you Rob... It worked... but I don't think I really understood what happened? But I'll study a little about those different scopes. And again, thank you for take your time to help me. – Alex Gouvêa Vasconcelos Dec 21 '14 at 01:57
  • 1
    Take a look at the manageOpenPopup() method in the markersHelper code, there you will see the compile call (with $rootScope)... – Rob Dec 21 '14 at 08:35
2

With the latest versions of angular-leaflet-directive, you can specify a scope to use on message rendering:

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