detecting when all child directives of a parent directive have linked

[mcoupar]

I'm looking for a clean way to detect when all child directives of a given type have been linked. I want the parent directive to be generic so it should work regardless of whether the child elements use ng-repeat or not. Note that ng-repeat changes the linking order.

Example 1: The parent post-link function will be executed after all the child elements have been linked, so I can simply track each child as it is linked then process them during parent post-link.

<parent>
    <child></child>
    <child></child>
    <child></child>
</parent>

Example 2: ng-repeat changes the linking order. In this case, the parent post-link will have already completed before attempting to link the children. Therefore, I can't use the parent post-link function to determine when all children have been linked, but I can add a check for $scope.$last on each child.

<parent>
    <child ng-repeat="c in children"></child>
</parent>

The problem I'm having is coming up with a nice, clean solution to handle both cases as it seems wrong for a parent to have to check whether the children use ng-repeat or not. Currently what I'm doing is inserting a dummy child into the template to hold the transcluded children using ng-repeat.

<child ng-transclude ng-repeat="dummy in [0]"></child>

That forces example 1 to act like example 2 and always generate a $scope.$last. It appears to work but has a definite smell about it.

[Sander Elias]

Hi MCoupar,

May I ask about your use-case? While this is possible, it's not a small feat. Also the solution actually might be different depending on the contents you want to put inside your element. Some stuff inside there might get put in asynchronous, making this even more challenging. (ngInclude and directives with an templateUrl being the prime offenders here..)

Regards

Sander   

[mcoupar]

Hi Sander

It's a cross platform video player for various Smart TV platforms.  Each device typically exposes it's own custom video playback API.  So, the real structure looks more like

<myVideo>
    <mySource ng-attr-src="smooth.ism"></mySource>
    <mySource ng-attr-src="progressive.mp4></mySource>
</myVideo>

We want to be able to supply a list of sources to represent various formats of the same video stream.  So, in the example above, any device that support Microsoft Smooth Streaming will attempt to play that first and if it doesn't support it, it will fallback to the progressive mp4 stream.

I need to know when all sources have been linked so that I can trigger the device to open the preferred stream and then optionally autoplay it.

Regards,

Marc

[mcoupar]

Sorry, I should have added that the normal use case will be to list all the <mySource> directives by using ng-repeat and setting the array it refers to in the controller.  However, I'd also like to be able to support manually listing the sources as below.

[Sander Elias]

The best way to tackle this is to expose an api on the myVideo directive (search in this list for that if you don't know how to do it. its' easier in later version, basically just use the controllerAs option of the ddo)

Then in the mySource directive, you can register yourself using that api.

Do you think you know enough?

Regards

Sander

[Marc Coupar]

Yeah, I get it. Thanks for the help

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/m77brXJBa0I/unsubscribe.
To unsubscribe from this group and all its topics, 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.

--

Marc Coupar Software Developer M +44 1273 325874 E marc....@neonstingray.com www.neonstingray.com

Deloitte. Technology Fast 50 Award - 2012

Deloitte. Technology Fast 50 Award - 2013

RedHerring. Technology Top 100 Award - 2013