How do directives control each other? - angularjs

Question

I have two directives:
module.directive('modal', function () {
return {
restrict: 'A',
templateUrl: "/templates/ui/components/modal.htm",
replace: true,
link: function ($scope, element, attrs) {
console.log("Loaded modal directive.");
},
controller: function ($rootScope, $scope) {
$scope.isOpen = false;
$scope.open = function () {
$scope.isOpen = true;
};
$scope.close = function () {
$scope.isOpen = false;
};
// Global
$rootScope.$on('openModal', function () {
console.log("open"); // How to call open function here?
});
$rootScope.$on('closeModal', function () {
console.log("close"); // How to call close function here?
});
}
}
});
module.directive('popUpWindow', function () {
return {
restrict: 'A',
templateUrl: "/templates/ui/components/pop-up-window.htm",
replace: true,
transclude: true,
link: function ($scope, element, attrs) {
console.log("Loaded pop-up window directive.");
$scope.title = attrs["title"];
},
controller: function ($rootScope, $scope) {
$scope.isOpen = false;
$scope.open = function () {
$scope.isOpen = true;
$rootScope.$emit('openModal');
};
$scope.close = function () {
$scope.isOpen = false;
$rootScope.$emit('closeModal');
};
}
}
});
The idea is that there is only ever one modal for all possible instances of popUpWindow.
I have no idea how to get these two to talk to each other. How do I get hold of my modal and call it's open and close functions? Where should I put the open and close functions, controller or link? It seems like the controller but the link has access to element.. Should I be looking to get an instance of the modal or is there some neat Angular way of doing this?
I've got a function on the modal firing using $emit on the pop up window but this doesn't feel like a great way of communicating between directives.
I've trawled the net and tried a lot of stuff but not found anything that seems to fix this. It doesn't seem obvious.

Answer 1

Directives are a way to teach HTML new tricks and it is primarily used for creating some reusable HTML components, hence the functionality of a directive should be self-contained and it should be independent on other directives.
If you want to maintain multiple popup windows, for instance, you should make the popupWindow directive to be driven by the model passed in. And in your controller, you should be able to track all popupWindows by tracking the model.
Directives should talk to each other via controller though you can make it happen by using message broadcasting.
Hope it can shed some light on.