Accessing values from one controller to another using on, broadcast and emit in angularjs
Posted By : Kamaldeep Singh | 28-Jun-2015
First let me give you a brief overview on $on, $broadcast and $emit
$on
The $on listens on events of a given type.
The general syntax for this is:
$on(name, listener);
Where:
- Name: Event name to listen on.
- Listener: Function to call when the event is emitted.
$emit
The $emit dispatches an event name upwards in the controller scope hierarchy notifying the $on listeners. When $emit is called, traversing upwards all listeners along the way listening for name event on this scope get notified. The event will stop propagating if one of the listeners cancels it.
The general syntax for this is:
$emit(name, args);
Where:
- Name: Event name to emit.
- Args: Arguments which will be passed onto the event listeners.
$broadcast
The $broadcast Dispatches an event name downwards in the controller to all child scopes (and their children) notifying the $on listeners. The event life cycle starts at the scope from where $broadcast was called. When $broadcast is called, traversing downwards all listeners along the way listening for name event on this scope get notified. The event cannot be canceled.
The general syntax for this is:
$broadcast(name, args);
Where:
- Name: Event name to broadcast.
- Listener: Arguments which will be passed onto the event listeners.
Example:
app.controller('FirstController', function($scope){
$scope.LoginFromFirst = function(){
$scope.$broadcast('CallFunction', $scope.name)
}
});
app.controller('SecondController', function($scope){
$scope.$on('CallFunction', function(events, args){
alert(“Logged In ”+args);
})
});
app.controller('ThirdController', function($scope){
$scope.LoginFromThird = function(){
$scope.$emit('CallFunction', $scope.name)
}
});
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Kamaldeep Singh
Kamaldeep is a highly skilled Backend Developer specializing in Java, specifically the Spring framework. He also has extensive knowledge of Javascript and associated frameworks such as Node.js and Express. He possesses a deep understanding of the latest technologies and has hands-on experience with Core Java, Spring Boot, Hibernate, Apache Kafka messaging queue, Redis, as well as both relational databases like MySQL and PostgreSQL and non-relational databases like MongoDB. He has made significant contributions to various projects, including Viral Nation, ExamWorks, TNIBRO, Biogas engineering, SecureNow - Web Application, FB Messenger Chatbot, Dialogflow Chatbot, and Catalyst. Kamaldeep's expertise allows him to seamlessly integrate different technologies into applications, highlighting his adaptability and innovative mindset. His practical experience and strong technical skills make him an invaluable asset to any team.