AngularJs Directives Loaded Event

Question

I have just started using AngularJs directives, using the resources here, here and here.

I have a situation where i need to do something after all directives have been loaded.

i.e

Scenario 1

Controller Loads
Directive 1 loads
Directive 2 loads
Final event fires (preferably picked up by the controller)

Scenario 2

Controller loads
Directive 1 loads
Directive 2 loads
Directive 3 loads
Final event fires (preferably picked up by the controller)

I can't seem to find a 'directives loaded' event. With a search, the best I could find was this SO post, (for which this answer does work), but it feels like a 'broad brush' approach.

What is the correct way of doing this please?

Happy to post code if needed, but it doesn't seem beneficial in this instance.

more than likely looking at the problem the wrong way. What is the use case for `final event fires`? — charlietfl, Jul 11 '14 at 21:19
you can broadcast or emit an event using $rootscope, any listener will pick up the message you can use it, but what do you want to do?, I don't see any particular case for firing a "load event" after all the directives has been loaded — pedrommuller, Jul 11 '14 at 21:32
I am using SignalR and trying to separate everything into 'plug and play' style modules (using directives in angular to achieve this). In SignalR, the connection start() must happen at the very end, as anything declared after a connection is started is ignored. My thinking was that each directive would reference only the signalR hub methods it needs, but having hubs split over separate directives means I need to control when the connection is started. i.e. work in line with the load order above. If I'm approaching it wrongly, I'll be happy to consider alternatives. — JsAndDotNet, Jul 11 '14 at 21:36
@HockeyJ I've been using SignalR as well, based on my experience I can recommend to wrap the signalR client (jQuery) into a service, and use that service in your controllers and work from there, you will be able to achieve the same, remember that directives are meant to manipulate DOM, this is an example on github (I'm not using that repo) but just to take an idea https://github.com/JustMaier/angular-signalr-hub — pedrommuller, Jul 11 '14 at 22:10
Your 1st and 3rd link "resources" are pointing to the same url: https://docs.angularjs.org/guide/directive ;) — glepretre, Jul 16 '14 at 07:55

Michael Kang · Answer 1 · 2014-07-12T02:26:39.683

15

You can use $timeout to execute a function after all the directives have been compiled, linked, and rendered.

$timeout(function() { 
    // do something here
});

edited Jul 12 '14 at 02:26

answered Jul 12 '14 at 01:46

Michael Kang

52,003
16
103
135

Thank you. I will give this a try, as well as the services and mark as answer if it does the trick. – JsAndDotNet Jul 12 '14 at 13:27
Legends say that he is still giving it a try. Hope one day he'll come back and mark it as an answer. – Prashant Pokhriyal Jul 22 '19 at 09:51

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

For the benefit of searchers...

@jack.the.ripper 's comment was correct. The SignalR stuff did need moving out to a service.

In the case of notifying when all directives were loaded, this has been working nicely.

edited May 23 '17 at 12:32

Community

1
1

answered Jul 17 '14 at 16:08

JsAndDotNet

16,260
18
100
123

AngularJs Directives Loaded Event

2 Answers2

Linked