In this article we’ll learn how to communicate between two multiple controllers in AngularJs.
Controller is very popular in AngularJs, In single page application sometimes we used multiple controllers for various purpose. For this reason we need to pass data from one controller to another controller. But how to pass data from controller to controller?
Consider the following example,
https://gist.github.com/tithi021/7012e86af6f395394cf854ab2a1c4ef5
From this simple code there have three controllers within in the separate div element. So, There have mainly two different controllers, the first controller name is firstCtrl and the second controller name is secondCtrl. And the firstCtrl has a child controller name is childCtrl. So the firstCtrl is a parent of childCtrl. And we can easily demonstrate three scenarios from this three controller.
Angular provides some event service and for using these services we can easily pass data from controller to controller. You can use $scope or $rootScope for communication between controller. Lets introduce $broadcast, $emit, $on.
$broadcast dispatches an event downwards, $emit dispatches an event upwards, $on catch the events that are dispatched from $broadcast or $emit.
$broadcast and $emit also define using $scope and $rootScope. Lets introduce,
$rootScope.$broadcast simply it’s a method, Its belong a strong power in angular that means using this method you can hear others $scope variable or others children. From our scenario, firstCtrl can hear others two controller scope variables.
$scope.$broadcast is for the $scope itself and its children. That means firstCtrl can hear only childCtrl $scope variables.
$rootScope.$emit only lets other $rootScope listeners catch it.
$scope.$emit is when you want that $scope and all its parents and $rootScope to hear the event.
So Its just a simple introduce about angular most three important events $broadcast, $emit, $on.
Lets see how it works,
From Scenario 1, Communication from child controller with parent controller in AngularJs
HTML Code:
From this sample code here used only two controllers firstCtrl and secondCtrl. firstCtrl is a parent of secondCtrl and here secondCtrl belongs two text box and one button field and the firstCtrl belong some view statement that provide from secondCtrl.
JavaScript Code
From this sample code here secondCtrl create a function $scope.submit() and then we used $scope.$emit event service for passing data from secondCtrl to firstCtrl and then firstCtrl just catch this event messages that provides from secondCtrl using $on.
Check the jsfiddle- Communication from child controller with parent controller in AngularJs
From Scenario 2, Communication from parent controller to child controller in AngularJs
HTML Code:
From this sample code here used only two controllers firstCtrl and secondCtrl. firstCtrl is a parent of secondCtrl and here firstCtrl belongs two text box and one button field and the secondCtrl belong some view statement that provide from firstCtrl.
JavaScript Code:
From this sample code here firstCtrl create a function $scope.submit() and then we used $scope.$broadcast event service for passing data from firstCtrl to secondCtrl and then secondCtrl just catch this event messages that provides from firstCtrl using $on.
Check the jsfiddle– Communication from parent controller to child controller in AngularJs
From Scenario 3, Calling a controller from another outside controller
HTML Code:
From this sample code here used only two controllers firstCtrl and secondCtrl. They are separated from each other. firstCtrl belongs two text box and one button field. And the second controller belong some view statement that provide from secondCtrl.
JavaScript Code:
From this sample code here firstCtrl create a function $scope.submit() and then we used $rootScope.$broadcast event service for broadcasting data from firstCtrl to secondCtrl and then secondCtrl just catch this event messages that provides from firstCtrl using $on. It’s simple!
Check the jsfiddle– Calling a controller from another outside controller
Hoping It’ll be helpful to understand the basic communication between controllers in AngularJs. There have many others solution but I used this techniques because Its simple to understand for everyone. Good day!
Thank you again for reading this, I’m excited to hear your comments and criticism.