Outer-directive and inner-directives

[alycklama]

I'm having some difficulties grasping some basic angular flows and techniques. Is it possible for the outer-directive to "know" when the inner-directives have been finished?

<outer-directive>

  <inner-directive></inner-directive>

  <inner-directive></inner-directive>


  <inner-directive></inner-directive>

</outer-directive>

I'm asking this because I noticed it's relatively slow to call "element.tooltip()" on a large set of items individually. It's a lot faster if I call $("a.tooltips").tooltip() for all of the tooltips at once. I've looked into "postLink", but at "postLink" of the outer-directive, the inner-directive has not yet been resolved.

Could someone push me into the right direction?

[Eric Eslinger]

I've not needed to fiddle with that all that much, but my understanding is that the inner-directives should all be instantiated and linked before the outer-directive's link function.

http://www.bennadel.com/blog/2603-directive-controller-and-link-timing-in-angularjs.htm

Theoretically, you ought to be able to do that call on the link function of the outer-directive (but not the controller function).

e

--
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.
For more options, visit https://groups.google.com/d/optout.

[alycklama]

That's exactly what I thought, but unfortunately it is not working.

table - controller

table - preLink

table - postLink

tooltip - controller

tooltip - preLink

tooltip - postLink

I would have expected the output below:

table - controller

tooltip - controller

table - preLink

tooltip - preLink

tooltip - postLink

table - postLink

I forgot to mention that in my first directive I load a template. In this template I load via a ng-repeater the tooltip directive.

Maybe this causes the above behavior?

[Eric Eslinger]

Yeah, I'd say that's probably the situation. If the tooltips are being added dynamically in a later digest cycle as a result of an ng-repeat or ng-include, I'm pretty sure the table's postLink and controllers will both fire off first.

It's something of a hack, but you could always do something like have the child elements call fireTooltip on the parent controller when they're instantiated (you can include a parent controller in a link if you do a require in the child directive's definition). fireTooltip could do something asynchronous - store a promise for a $timeout(function(){"update tooltips here"}, 500), and return right away. If the promise already exists, don't do anything, since it'll fire anyway (or add that tooltip to the list of elements to batch-update if you're being fancy).

e

--

[alycklama]

Thanks for the comment! I've implemented the call-back to the parent successfully, although the performance is still as bad as it was earlier. It seems to be that it still iterates through all of the DOM elements one-by-one.

$element.find("a.tooltips").tooltip();

$('a.tooltips').tooltip();

I would have assumed that one of the above lines would fix the performance issues, but it doesn't.