Communication between unrelated directives - angularjs

Question

As part of my layout, I have a banner directive:
.directive('appBanner', [function () {
return {
restrict: 'E',
replace: true,
controller: function ($scope) {
$scope.$on('BANNER_ID_UPDATED', function (e, data) {
// code to fetch banner from db here
});
}
};
}]);
Now, depending on the page or content that's displayed, the banner may have to change. I've been trying to use events to communicate between my banner directive and my other directives. It will fire the following event:
$scope.$emit('BANNER_ID_UPDATED', id);
This doesn't always work. When I place some console.log calls, it seems that the event is sometimes fired before it is being listened for. How can I fix this, or how can I otherwise ensure communication between two unrelated directives?

Answer 1

There is a lot of potential pitfalls when using events. For this particular case I would propose to use a service (you can bundle it with banner directive into the banner submodule).
Your directive can then register the listener to trigger banner update. Then call some updateBannerData(data) of this service which will call the listener to trigger banner change. Here is some code directly from my head (hopefully without errors...)
.factory('bannerService', function() {
var bannerService = {
listener: null,
onUpdate(listener) {
bannerService.listener = listener;
}
updateBannerData: function(data) {
if(listener) {
listener(data);
}
}
};
return bannerService;
})
// inject bannerService here:
.directive('appBanner', [function (bannerService) {
return {
restrict: 'E',
replace: true,
controller: function ($scope) {
bannerService.onUpdate(function (data) {
// code to fetch banner from db here
});
}
};
}]);