How to synch controller creation and emitting events? - angularjs

Question

I am interested if any of you run into this issue and how you solved it. I have a page that has it's controller and in that page, each tab has it's own controller. Depending on how I access the page, via navigation or direct url link, I have issue that tab controllers are not yet ready, by the time outer controller raises event. My solution was to raise "ControllerCreated" event, passing instance of the controller as the event arg. from each of the tab controllers. Outer controller listens for these and invokes on them "load" operation. Is there other built in way to synch this without having to raise custom event?

Answer 1

Event Recorder Service
One approach is to store outer events in a service and have child controllers use the service to "catch-up" and subscribe to the events.
app.service("eventRecorder", function() {
var lastEvent;
var subscriberIdNum = 0;
var subscriberList = {};
this.record = function evRecorder (eventValue) {
lastEvent = eventValue;
};
this.subscribe = function evSubscribe(callbackFn) {
//callback for subscriber to "catch-up"
if (lastEvent) { callbackFn(lastEvent) };
//save subscriber
subscriberIdNum++
var subscriberIdString = 'id'+subscriberIdNum;
subscriberList[subscriberIdString] = callbackFn;
//return unSubscribe function
return function unSubscribe() {
delete subscriberList[subscriberIdString];
};
};
this.notify = function evNotify( eventValue ) {
this.record(eventValue);
angular.forEach(subscriberList, function (cb) {
cb(eventValue);
});
};
});
Client Controller Example
app.controller("client", function($scope, eventRecorder) {
var vm = $scope;
var unSubscribe = eventRecorder.subscribe(function(value) {
//callback executes immediately to "catch-up"
vm.eventValue = value;
});
$scope.$on('$destroy', unSubscribe);
});
Parent Controller Usage
app.controller("parent", function($scope, eventRecorder) {
var vm = $scope;
vm.onEvent(value) {
eventRecorder.notify(value);
});
});
In order to prevent memory leaks, controllers should unsubscibe on destruction of the scope.
This example shows an event recorder service that provides only one feed. It can be generalized to handle more that one feed.
UPDATE: Automatic Unsubscribe
"In order to prevent memory leaks, controllers should unsubscibe on destruction of the scope." I know what you mean, we had similar notification service, but we pulled it out, because somebody would always forget to unsubscribe.
One could require scope as a subscribe function argument and implement automatic unsubsciption.
this.subscribe = function evSubscribe(scope, callbackFn) {
//callback for subscriber to "catch-up"
if (lastEvent) { callbackFn(lastEvent) };
//save subscriber
subscriberIdNum++
var subscriberIdString = 'id'+subscriberIdNum;
subscriberList[subscriberIdString] = callbackFn;
var unSubscribe = function evUnsubscribe() {
delete subscriberList[subscriberIdString];
};
scope.$on("$destroy", unSubscribe);
return unSubscribe;
};