Run Directive After NG-Repeat

Question

So I am looking to move my library of plugins over to Angular wherever possible just to keep things consistent. The problem I am running into is getting directives to run after after any directives on its children have run.

Just to give a little bit of clarity, the goal here is to make it easy for our integrators (CSS/HTML only team members) to add dynamic functionality to items simply by tagging it with a feature. Currently they do this via a data-features attribute. For instance, for an image slider they might tag a UL with a data-features="imageSlider" attribute to make that UL a slider.

Along those lines, I am working on moving that image slider module over to angular. I want my integrators to be able to write something like:

<ul image-slider>
    <li slide>
         My Slide 1
    </li>
    <li slide>
         My Slide 2 
    </li>
    <li slide>
         My Slide 3
    </li>
</ul>

And I can turn that into an image slider dynamically. The above works fine, however if the markup looks like this:

<ul image-slider>
    <li slide ng-repeat="slide in data.slider.slides">
         My Slide {{$index}}
    </li>
</ul>

Then the ng-repeat doesn't finish before the image-slider directive runs, which means I do not have access to all of the slides to work my magic.

Is there a way I can tell the image-slider directive to wait for any directives inside of it to finish before firing?

I have read the following questions already:

• Directive that run after ng-repeat
• Angularjs custom directive highlight text after ng repeat has run
• Running parent directives after children directives

None of these seem to have an answer to this problem so I figured I would put together a much more succinct question in the hopes of finding an answer.

Answer 1

I suggest a much simpler approach. Use the $timeout function. If you set the $timeout to zero, it will run exactly after everything has ran:

app.directive("imageSlider", [ '$timeout', function($timeout) {
    return function(scope, element, attrs)
    {
        // your data is defined in scope.data.slider.slides

        $timeout(function() 
        {
            // This code will run whenever the page has finished processing
            // So it will run after ng-repeat has finished
        }, 0);
    }
}]);