Do something when nested/transcluded directives have been compiled and linked

Question

Think about something like the following directive markup:

<!-- Directive A -->
<directive-a>
</directive-a>

<-- Directive B -->
<directive-b>
   <directive-a>
        <transclusion1></transclusion1>
   </directive-a>
</directive-b>

I need to perform some DOM manipulation once the <directive-a> has been already compiled+linked from <directive-b>.

When I provide a link function on <directive-b> (or compile function), <directive-a> is still without its transcluded content.

I can't figure out how to perform that DOM manipulation once the <directive-a> has been already compiled+linked.

[MCVE](http://stackoverflow.com/help/mcve) would be helpful. — Estus Flask, May 20 '16 at 11:20
@estus Not on this case... I'm about to find the solution since Angular 1.5.3+ has hooks. I doubt that a MCVE would help here, because my problem isn't a bug, error or whatever: it's a concept and I need to know how to implement it in Angular. — Matías Fidemraizer, May 20 '16 at 11:21
Transcluded elements are already available in `link` function and `$postLink` hook. As you wish. — Estus Flask, May 20 '16 at 11:28
@estus if this were true... I wouldn't be here to ask a question :D — Matías Fidemraizer, May 20 '16 at 11:46
You will hardly get another answer without investing some time in posting your own directives. — Estus Flask, May 20 '16 at 11:57
`post-link` callback looks like a hack, good for you if this works. It looks like nested directives have templateUrl in your case. The good pattern here is to communicate from children to parent with `require`d controller or scope event, not in the opposite direction. — Estus Flask, May 20 '16 at 12:19
@estus The issue in my case is that the equivalent directive to directiveA is unrelated to directB. Because directiveA is a component to harmonize all other ui components to generalize UX with some common behaviors and look&feel — Matías Fidemraizer, May 20 '16 at 12:47

Matías Fidemraizer · Accepted Answer · 2016-05-25T07:30:14.607

Finally the solution is easier than I thought when I started to implement the solution.

Let's say there's the <directive-a> with the following options:

{
    scope: {
        "postLink": "&"
    }
}

...and, as part of controller() function I do:

{
    controller: () => {
        // Angular 1.5.3+
        this.$postLink = $scope.postLink;
    },
    scope: {
        "postLink": "&"
    }
}

Now I can hook to <directive-a> $postLink hook:

<-- Directive B -->
<directive-b>
   <directive-a post-link="model.directiveAPostLink()">
        <transclusion1></transclusion1>
   </directive-a>
</directive-b>

When the whole model.directiveAPostLink() function is called, <directive-a> is already compiled and linked!

Further details

Checking Angular GitHub's repository commit history, I've found the following description:

$postLink - Called after this controller's element and its children been linked. Similar to the post-link function this hook can be used to set up DOM event handlers and do direct DOM manipulation.

Note that child elements that contain templateUrl directives will not have been compiled and linked since they are waiting for their template to load asynchronously and their own compilation and linking has been suspended until that occurs.

It's exactly my case: I'm loading templates from an URL.

Do something when nested/transcluded directives have been compiled and linked

1 Answers1

Further details