Let inner directives run before outer directives angularjs

Question

Let inner directives run before outer directives angularjs

I have the following html:

<div nag-tabs="tabsOptions">
    <ul class="tabs">
            <li ng-repeat="tab in tabs">{{ tab }}</li>
    </ul>
    <div class="tab_content">
            <div ng-repeat="tabContent in tabsContent">{{ tabContent }}</div>
    </div>
</div>

The issue that I am having is that the tabs directive is running before the the ng-repeat directive.

Is there any way to get the tabs directive to run after all the directives that encompasses the content of the nag-tab directive run (ng-repeat or whatever else might be put in there)?

angularjs
angularjs-directive

Answer 1

A directive can "run" at three different times, because a directive can have compile, pre-link, and post-link methods. This plunker contains two sample HTML structures – one uses ng-repeat, one doesn't – and it prints out when each of the 3 directive functions runs.

For the ng-repeat example, we see that the ng-repeat pre- and post- link functions run after the nag-tabs post-link. So if you want to have the tabs directive do something after the ng-repeat post-link functions run, you'll have to use a $timeout (like @charlietfl suggested) or a $watch, or an event, to execute the code later.

You could try adding a checklast directive to the ng-repeat element which could signal your tabs directive when $last is true. Signalling could be done via an event, or the checklast directive could require your tabs directive and then the checklast directive could call a method on your tabs directive's controller. See also http://stackoverflow.com/a/13906907/215945.

Note, the nifty plunker came from Peter.

Answer 2

Do you control the tab directive? If so, you modify its compile phase to add the ng-repeat to its child element.