Pass variable from parent directive to child-directive? - angularjs

Question

I have two directives that look like this:
<g-map centerlong="{{myLocation.long}}" centerlat="{{myLocation.lat}}" zoom="12" id="map" class="map">
<g-marker poslong="{{myLocation.long}}" poslat="{{myLocation.lat}}" title="g-marker"></g-marker>
</g-map>
g-map creates a google map, and now I wish to apply g-marker to it.
Therefore g-marker needs access to the object created in g-map. How can I pass it
directive('gMap', function(googleMaps){
return{
restrict: 'E',
replace: true,
transclude: true,
template: "<div ng-transclude></div>",
scope: true,
link: function(scope, element, attrs){
scope.$on('location', function(){
//här ska den recentreras
})
//create the map
var center = googleMaps.makePosition(attrs.centerlat, attrs.centerlong)
//update map on load
var options = googleMaps.setMapOptions(center, attrs.zoom);
scope.map = googleMaps.createMap(options, attrs.id)
}
}]
};
}).
directive('gMarker', function(googleMaps, $timeout){
return{
//require: "^gMap",
restrict: 'E',
scope: true,
link: function(scope, element, attrs, controller){
var location = googleMaps.makePosition(attrs.poslat, attrs.poslong)
$timeout(function(){
//this is where I want to access the scope.map variable
googleMaps.addMarker(map, location,attrs.title)
}, 0);
}
}
})

Answer 1

As you said, googlempas replaces the html tag, so you use transclude, which makes the parent scope inaccessible to the child scope.
Here are some options:
The easiest solution is to make the parent scope non-isolate, so just remove scope : true in the parent directive, and set scope.map in the controller of the parent directive. This ensures that the property is immediately available in the child link function (no need for $timeout). however, if you are doing dom manipulation, you have to do it in the link function)
Or you could set up bi-directional data binding between parent and child directive:
scope : {map : '=map'}
Or, if you prefer not to expose the whole map object to the child, you could expose a method of the parent scope that the child can call:
In gMap, create a controller:
controller : [function() {
this.addMarker(location, title)
}];
in gMarker, require the gMap:
require: "^gMap"
This injects the gMap controller into your link directive:
link: function(scope, element, attrs, gMapController){
gMapController.addMarker(location, attrs,title)
}
I have made an example for each option in this plunker:
http://plnkr.co/edit/1UyNVhFZl4HtFdqeYhie?p=preview
I'd prefer the third option, since it's not necessary that a child can access the whole map object.
Please note that it's possible that other factors can cause any of the options to fail. Please report back if it doesn't work.