I am faced with a scenario where one directive is dependent on another:
<div style="border:2px solid black;height:150px;padding:10px">
<my-internal-directive></my-internal-directive>
<my-internal-directive></my-internal-directive>
<my-internal-directive></my-internal-directive>
</div>
The directive in question is as follows:
<h2>foo</h2>
Its respective controller code snippet reads:
internalDirectiveModule.directive('myInternalDirective', function($document){
return {
restrict:'E',
scope: {},
//templateUrl: 'myInternalDirective.html', // EXTERNAL directive render first
template: '<h2>foo</h2>', // INTERNAL directive render first
link: function(scope, element){
$document.find('body').append('<h1>internal directive\n');
}
};
});
A challenge arises when utilizing templateUrl for the internal directive, causing it to render after the external one. Conversely, employing template results in the internal directive rendering first. I need to access data from the rendered internal directive within the link method of the parent directive post-rendering, but constrained by the requirement to use templateUrl. How can I achieve this behavior of retrieving data from a child directive within the link method of a parent directive?