I am encountering an issue with directives nested within directives. In order to meet the requirements of our designers, I need the contents to be direct children of the DOM node.
<div>
<my-directive style="color: blue;">
<p>Name: {{ ctl_a.fname }} {{ ctl_a.sname }}</p>
<p>External Test: {{ xternal }}</p>
<div>
<nested-directive incoming="ctl_a.a_counter"></nested-directive>
</div>
</my-directive>
</div>
What are the most effective methods for ensuring that this loads correctly? For example, allowing "my-directive" to access ctl_a.fname and enabling "nested-directive" to access $scope.incoming as passed in by "ctl_a.a_counter".
I have provided a plunk demonstrating the issues I am facing when using $compile. When utilizing $compile, the nested directives execute twice - once during the outer directive compile method, and then again manually. Interestingly, only the manual execution seems to render the contents correctly.
If I utilize ng-transclude, none of the attributes passed to the inner directive function properly without prefixing with $$prevSibling or $parent because ng-transclude generates a new scope. This necessity to reference it in this manner feels inherently flawed.
Edit: Another plunk is available here, branching off from the initial one. In this version, I illustrate the usage of ng-transclude and how $parent must be utilized to access the controller for its directive.
Thank you.