1

Inside one of my views I'm using myDirective like this:

<div my-directive></div>

It (myDirective) has a template:

<div>
    <div my-inner-directive></div>
</div>

My question is: how do I know from within myDirective that all sub-directives were rendered? In essence, when can I use element.find() and actually get results? DO NOT offer me window.setTimeout and $timeout because those are bogus solutions that will never work properly.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
Alex
  • 1,011
  • 2
  • 16
  • 27

3 Answers3

2

Assuming this markup..

<parent>
    <child1>
        <child2></child2>
    </child1>
</parent>

The order of execution is:

  1. PreLinking of Parent
  2. PreLinking of Child1
  3. PreLinking of Child2
  4. PostLinking of Child2
  5. PostLinking of Child1
  6. PostLinking of Parent.

PostLinking function of a directive will guarantee the execution of its child elements.

It is place to bind event listeners or lookup for child DOM nodes.

In the markup that is specified in the example..
PostLinking of myDirective will be executed after myInnerDirective is compiled.

More on this at: link

Vinay K
  • 5,562
  • 1
  • 18
  • 27
1

Vinay K gave you a good link but you should also take a look at this post on StackOverflow: Angular directives - when and how to use compile, controller, pre-link and post-link

It's quite long but has probably most of the stuff you'll need to know for a while :)

Community
  • 1
  • 1
Sam
  • 341
  • 1
  • 4
  • 15
0

Ok, turns out that I was doing some things the wrong way. I have also missed that I can use $broadcast() and $on().

So. Inner directive:

$scope.$broadcast('myCustomDirectiveEvent')

Outer/parent directive:

$scope.$on('myCustomDirectiveEvent')
Alex
  • 1,011
  • 2
  • 16
  • 27