Isolate scope on parent prevents communication to child - angularjs

Question

I have the following markup:
<div class="row" loader="loader" address-book>
<!-- Loading complete - this should show result -->
<div loader-success></div>
<!-- Loading failed - this should show some error -->
<div loader-failure>Failure</div>
</div>
Here, address-book is the main app, and the loader is to only act as showing an animation while the page is loading. The content of the address-book would go into loader-success and the failure message (that is, if no content found) would go inside loader-failure.
So my idea was to use the following directives:
app.directive('loader', function($compile, $timeout)
{
return {
restrict: 'AE',
scope: {
loader: '&'
},
transclude: true,
template:
'<div class="row" ng-if="loading">' +
' <div class="small-15 columns text-center">' +
' <i class="fa fa-spin fa-circle-o-notch"></i>' +
' </div>' +
'</div>' +
'<div ng-transclude></div>',
link: function(scope, element, attrs)
{
scope.loading = true;
scope.failure = false;
scope.success = false;
scope.$watch('loader', function(fn) {
if (_.isFunction(fn)) {
scope.loader()
.then(function(){
scope.success = true;
scope.loading = false;
scope.$safeApply();
})
.catch(function() {
scope.failure = true;
scope.loading = false;
scope.$safeApply();
});
}
});
}
};
});
where scope.loader is the promise of the $q set from address-book. The promise is resolved/rejected after the address-book tries to get content.
For the success/failure blocks I have:
app.directive('loaderFailure', function()
{
return {
restrict: 'AE',
link: function(scope, element, attrs)
{
element.hide();
scope.$watch('failure', function(value) {
if (_.isTrue(value)) {
element.show();
}
});
}
};
});
app.directive('loaderSuccess', function()
{
return {
restrict: 'AE',
link: function(scope, element, attrs)
{
element.hide();
scope.$watch('success', function(value) {
if (_.isTrue(value)) {
element.show();
}
});
}
};
});
However, because of the isolate scope on loader, the scopes of the two children loader-success and loader-failure can no longer read the parent's. I cannot use the $compile on loader because that would then take the scopes out of the address-book's app.
What can I do?

Answer 1

You can use events. If you want to send some date from children to parent use $scope.$emit.
From parent to children $scope.$broadcast - can have negative performance impact
It it good approach to use events when you want to communicate between components that are loosely coupled.
See more info about events:
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit

Answer 2

So I ended up using $emit. However, since my loader directive can be used on multiple different components on the same page, it was important to be able to distinguish between the two. Also, the loader is added to an element with another directive running on it.
To fix these issues, this is what I did:
Failure
The channel is then used as a unique identifier. It can even be the $id of the other directive scope to ensure that it is completely unique. Now, the directives are as follows:
app.directive('loader', function($compile, $rootScope)
{
return {
restrict: 'AE',
scope: {
loader: '&',
channel : '#loaderChannel'
},
transclude: true,
template:
'<div class="row" ng-if="loading">' +
' <div class="small-15 columns text-center loader">' +
' <i class="fa fa-spin fa-circle-o-notch"></i>' +
' </div>' +
'</div>' +
'<div ng-transclude></div>',
link: function(scope, element, attrs)
{
scope.loading = true;
scope.$watch('loader', function(fn) {
if (_.isFunction(fn)) {
scope.loader()
.then(function(){
scope.loading = false;
$rootScope.$emit('LOADER_SUCCESS', scope.channel);
scope.$safeApply();
})
.catch(function() {
scope.loading = false;
$rootScope.$emit('LOADER_FAILURE', scope.channel);
scope.$safeApply();
});
}
});
}
};
});
app.directive('loaderFailure', function($rootScope)
{
return {
restrict: 'AE',
link: function(scope, element, attrs)
{
element.hide();
$rootScope.$on('LOADER_FAILURE', function(event, channel) {
if (channel == attrs.loaderFailure) element.show();
});
}
};
});
app.directive('loaderSuccess', function($rootScope)
{
return {
restrict: 'AE',
link: function(scope, element, attrs)
{
element.hide();
$rootScope.$on('LOADER_SUCCESS', function(event, channel) {
if (channel == attrs.loaderSuccess) element.show();
});
}
};
});
Basically, I $emit the success or failure with the channel. And the loader-success and loader-failure listen to these broadcasts, match their channel it and behave accordingly.
In each component then, I simply define scope.loader = $q.defer() and resolve/reject it when I need.