Trying to pass a JSON object from an Angular service to a directive is proving to be tricky. My goal is to dynamically $compile a directive and send an object to it.
The setup should resemble something like this:
var template = '<gmap-info-window layer="layer" marker="marker"></gmap-info-window>',
content = $compile(template)(searchScope);
The directive structure I have in mind looks like this:
.directive('gmapInfoWindow', [function() {
scope: {
marker: '=',
layer: '='
},
link: function(scope, element, attrs) {
// Manipulating objects present in attrs
}
}]);
This approach seems to fall short as the values retrieved from attrs.marker and attrs.layer are just plain strings.
In my experimentation, I found a partial solution by utilizing the transcludeFn function of the $compile method. While functional, I'm not entirely convinced that this is the optimal way forward for achieving my objective.
var template = '<gmap-info-window></gmap-info-window>',
content = $compile(template)(searchScope, null, {
parentBoundTranscludeFn: function() {
return {
marker: _marker,
layer: _layer
};
}
});
In contrast, here's how the updated directive code would appear:
.directive('gmapInfoWindow', [function() {
scope: {},
link: function(scope, element, attrs, controller, transcludeFn) {
var objects = transcludeFn();
// The desired objects now reside within the 'objects' variable!
}
}]);
I refuse to believe there isn't a cleaner way to achieve what I need. This current method feels somewhat inelegant. Appreciate any insights you may have!