Nested directive components : compilation order inner html access

[Noobcodeur]

I have two directives that are used to modify DOM.

Basically it looks like that :

<directive1>

     // some div are added with directive 1 and among which is directive 2

     <directive2>

          // a bunch of divs are added here too and I would customize dom manipulation here in directive 1

     </directive2>

</directive1>

Basically, I am wondering if I can have access to the inner html of directive2 from directive1.

Many thanks in advance.

[Elmar Weber]

On Monday, May 6, 2013 6:34:00 PM UTC+2, Noobcodeur wrote:

I have two directives that are used to modify DOM.

Basically it looks like that :

<directive1>

     <directive2>

 

Basically, I am wondering if I can have access to the inner html of directive2 from directive1.

I'm not sure whether this is in general so, but for a simple example I looks like angular is processing the directives from the lower ones to the upper ones. So you can just access the manipulated DOM in your directive1. See http://plnkr.co/edit/kFZq4o?p=preview.
 

[Noobcodeur]

Thanks for the quick answer. For some reason, I can't manage to append something to the content generated by the directive2 nested in directive 1.. when I manipulate dom with directive 1.. (it's a bit messy to explain).

I forked your plnkr so that it will be easier to understand:

http://plnkr.co/edit/0E1zbj?p=preview

Many thanks again !

[Ben Nadel]

I didn't look at your example, but just a note that all $watch() handlers are called asynchronously. So, if one of your directives renders data based on a $watch statement, it's certainly likely that a ancestral directive will be linked / triggered *before* the nested content has been rendered.

-Ben

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Ben Nadel
Adobe Community Expert
Adobe Certified Advanced ColdFusion Developer
Manager New York ColdFusion User Group
http://www.bennadel.com

Need ColdFusion Help?
http://www.bennadel.com/Ask-Ben

[Noobcodeur]

Many thanks and yes I had thought about something similar but concerning the digest cycle.

Actually I foudn out where the problem was, I couldn't manipulate the directive since it was not yet inserted into the DOM. Only after I append everything to element and use $compile(element.contents())(scope); can the ancestor directive have access to the dom portions that are created by the child directive.

Many thanks for the tips both anyhow.

[Josh David Miller]

Hello!

Just a couple of technical notes. Assume that you have this markup:

<div directive1>

  <div directive2>

    <!-- ... -->

  </div>

</div>

Now AngularJS will create the directives by running directive functions in a certain order:

directive1: compile

  directive2: compile

directive1: controller

directive1: pre-link

  directive2: controller

  directive2: pre-link

  directive2: post-link

directive1: post-link

By default a straight "link" function is a post-link, so your outer directive1's link function will not run until after the inner directive2's link function has ran. That's why we say that it's only safe to do DOM manipulation in the post-link. So toward the original question, there should be no issue accessing the child directive's inner html from the outer directive's link function, though dynamically inserted contents must be compiled, as said above.

That said, this is not the right solution. Your outer directive shouldn't care what the HTML of the inner directive is. You should communicate between your components using the model or attributes or a 'require' property. This eases testing and makes your components more reusable and more easily maintainable.

Josh

--

[Noobcodeur]

Awesome, thanks a million, it's quite clear now. Concerning your last point, you are absolutely right. Going to look into this right now.

Thanks again !