Consider avoiding the use of $emit and $on. If you have access to the $rootscope object, simply create a key-value pair or store the data you need for checking. You can wait for the data using $watch, or implement a callback with $rootscope.
Model:
model.load = function(){
// model.loading = true;
$rootScope.isLoading = true;
return service.getData().then(storesResult, storesFault);
}
var storesResult = function (value) {
model.categoriesLoading = false;
$rootScope.isLoading = true;
model.stores = value.result;
saveData();
};
var storesFault = function (value) {
var data = value.data;
var status = value.status;
model.categoriesLoading = false;
model.stores = null;
$rootScope.isLoading = true;
$rootScope.$emit('systemAlert', {title: 'Loading Error', message: data, status: status, type: 'danger', timeout: 10000, showAsModal: true});
return value;
};
command.execute = function () {
$rootScope.$watch('isLoading', onLoadingChange);
};
var onLoadingChange = function ( value ){
if (value === true) {
// or simply if( value )
showModal('sections/modals/loading/loading.tpl.html');
} else {
hideModal();
}
};
};
HOWEVER
Using $rootScope to store attributes may not be the optimal solution. Consider other approaches.
ALSO
A brief explanation on $emit and $broadcast:
Controllers are instantiated with $scope DI'd => link
(they are not singletons);
Here's how broadcast and emit work in a nested scenario:
3
--------
| |
--- ----
1 | 2 |
--- --- --- ---
| | | | | | | |
Refer to this tree structure when considering the following communication questions using broadcast and emit.
- How does node 1 communicate with node 3?
In one.js file:
scope.$emit('messageOne', someValue(s));
In three.js file:
scope.$on('messageOne', someValue(s));
- How does node 2 communicate with node 3?
In two.js file:
scope.$emit('messageTwo', someValue(s));
In three.js file:
scope.$on('messageTwo', someValue(s));
- How does node 3 communicate with node 1 and/or 2?
In three.js file:
scope.$broadcast('messageThree', someValue(s));
In one.js && two.js files based on your chosen recipient.
scope.$on('messageThree', someValue(s));
- How does node 2 communicate with node 1?
In two.js file:
scope.$emit('messageTwo', someValue(s));
In three.js file:
scope.$on('messageTwo', function( event, data ){
scope.$broadcast( 'messageTwo', data );
});
In one.js file:
scope.$on('messageTwo', someValue(s));
HOWEVER
When dealing with multiple nested nodes that need to communicate, the usage of $emit, $broadcast, and $on can become complex. One approach is to centralize the messaging system within the parent node.
In the PARENT NODE (in this case, node three)
In three.js:
scope.$on('pushChangesToAllNodes', function( event, message ){
scope.$broadcast( message.name, message.data );
});
Now, any child node only needs to $emit the message or listen for it using $on.
NOTE: While $emit, $broadcast, and $on are useful for specific scenarios, ensure there isn't unnecessary cross-communication within nested paths.
- How does node 2 communicate with node 1?
In two.js file:
scope.$emit('pushChangesToAllNodes', sendNewChanges());
function sendNewChanges(){
return { name: 'talkToOne', data: [1,2,3] };
}
In three.js file:
This scenario has already been addressed.
In one.js file:
scope.$on('talkToOne', function( event, arrayOfNumbers ){
arrayOfNumbers.forEach(function(number){
console.log(number);
});
});
While specific listeners are still needed, this centralized approach simplifies communication across nodes without direct parent involvement.
I hope this explanation is helpful...