Communication Among Controllers in AngularJS

Pradeep Sahoo
Jun 30, 2015
29k
0
3
Article

AngularJs provides the $broadcast, $on and $emit services for event-based communication among controllers. This is very similar to the publisher subscriber pattern.

We can use root scope or service to pass data across controllers:

$broadcast: dispatches the event downwards to all child scopes.
$emit: dispatches the event upwards using the scope hierarchy.
$on: listen on the events of a given type. It can catch the event dispatched by $broadcast and $emit.

We will do a sample to understand how to communicate among controllers.

Using $broadcast

We will see three controllers named ControllerBase, ControllerOne and ControllerTwo. From the ControllerBase we will pass some values to ControllerOne and ControllerTwo.

<html ng-app="myModule">
<head>
<title>AngularJS Communicating across controllers</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var myModule = angular.module('myModule', []);
myModule.factory('commonDataService', function ($rootScope) {
var dataService = myModule
dataService.message = '';
dataService.prepForBroadcast = function (msg) {
this.message = msg;
this.broadcastItem();
};
dataService.broadcastItem = function () {
$rootScope.$broadcast('broadCastData');
};
return dataService;
});
function ControllerBase($scope, dataService) {
$scope.handleClick = function (msg) {
dataService.prepForBroadcast(msg);
};
$scope.$on('broadCastData', function () {
$scope.message = dataService.message;
});
}
function ControllerOne($scope, dataService) {
$scope.$on('broadCastData', function () {
$scope.message = 'In ControllerOne ,Value is : ' + dataService.message;
});
}
function ControllerTwo($scope, dataService) {
$scope.$on('broadCastData', function () {
$scope.message = 'In ControllerTwo,Value is :' + dataService.message;
});
}
ControllerBase.$inject = ['$scope', 'commonDataService'];
ControllerOne.$inject = ['$scope', 'commonDataService'];
ControllerTwo.$inject = ['$scope', 'commonDataService'];
</script>
</head>
<body>
<div style="border: 5px solid gray; width: 500px;">
<p> This is ControllerBase</p>
<div ng-controller="ControllerBase">
<input ng-model="message" style="width:300px;">
<button ng-click="handleClick(message);">Pass From First Controller
</button>
</div>
<p> This is ControllerOne</p>
<div ng-controller="ControllerOne">
<input ng-model="message" style="width:300px;">
</div>
<p> This is ControllerTwo</p>
<div ng-controller="ControllerTwo">
<input ng-model="message" style="width:300px;">
</div>
<br />
</div>
</body>
</html>

Here the event life cycle starts at the scope on which $broadcast was called (here the ControllerBase). All listeners listening for the name event on this scope are notified (ControllerOne and ControllerTwo.).

Here in the BaseController we call Broadcast Message that assigns scope data from the factory as in the following code snippet:

dataService.broadcastItem = function () {
$rootScope.$broadcast('broadCastData');
};

And in ControllerOne we get the value by $on as in the following code snippet:

$scope.$on('broadCastData', function () {
scope.message = 'In ControllerOne ,Value is : ' + dataService.message;

Using $Rootscope

Using rootscope we can set the value in one controller and read it from other controller.

The following is the sample code snippet:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
<script>
var myApp = angular.module('myApp', []);
function controllerOne($scope, $rootScope) {
$rootScope.name = 'From Rootscope set in controllerOne';
}
function controllerTwo($scope, $rootScope) {
$scope.name2 = $rootScope.name;
}
</script>
</head>
<body>
<div style="border: 5px solid gray; width: 300px;">
<div ng-controller="controllerOne">
Setting the rootscope in controllerOne
</div>
<div ng-controller="controllerTwo">
Hello, {{name2}}!
</div>
<br />
</div>
</body>
</html>

As we know, Rootscope is the top-level data container in AngularJs, we can keep any data in rootscope and read it when needed.

Using a Service

Using a service, we can set the value in one controller and read it from another controller.

The following is the sample code snippet:

<html ng-app="App">
<head>
<title>Passing Data in Controllers</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var app = angular.module('App', []);
app.factory('TestService', function () {
var TestService = {
Value: ' Default Value Set in Test Service'
};
return TestService;
});
app.controller('controllerOne', function ($scope, TestService) {
$scope.Value = TestService.Value;
TestService.Value = 'I am from controllerOne';
});
app.controller('controllerTwo', function ($scope, TestService) {
$scope.Value = TestService.Value;
});
</script>
</head>
<body>
<div style="border: 5px solid gray; width: 400px;">
<div ng-controller="controllerOne">Controller 1: {{Value}}</div>
<div ng-controller="controllerTwo">Controller 2: {{Value}}</div>
</div>
</body>
</html>

Using $emit and $on

It dispatches the event upwards using the scope hierarchy.

We will see three controllers named Controllerone, ControllerTwo and ControllerThree. From the ControllerTwo and ControllerThree we will pass some values to Controllerone.

<html ng-app="App">
<head>
<title>Passing Controller values</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var App = angular.module('App', []);
//Controllerone
App.controller('Controllerone', Controllerone);
Controllerone.$inject = ["$scope"];
function Controllerone($scope) {
$scope.$on('cityValue', function (events, data) {
$scope.city = data;
});
$scope.$on('addressValue', function (events, data) {
$scope.address = data;
});
}
//ControllerTwo
App.controller('ControllerTwo', ControllerTwo);
ControllerTwo.$inject = ['$scope'];
function ControllerTwo($scope) {
$scope.getCity = function (city) {
$scope.$emit('cityValue', city);
}
}
//ControllerThree
App.controller('ControllerThree', ControllerThree);
ControllerThree.$inject = ["$scope"];
function ControllerThree($scope) {
$scope.getAddrress = function (addr) {
$scope.$emit('addressValue', addr);
}
}
</script>
</head>
<body ng-app="App">
<div style="border: 5px solid gray; width: 500px;">
<u>Controller One </u>
<div ng-controller="Controllerone">
<p><b>Getting City from ControllerTwo :</b> {{city}} </p>
<p> <b>Getting Address from ControllerThree :</b> {{address}}</p>
<div ng-controller="ControllerTwo">
<p>Controller Two </p>
City :<input type="text" ng-model="city" />
<button ng-click="getCity(city)">Pass City to Controllerone </button
</div>
<p>Controller Three </p>
<div ng-controller="ControllerThree">
Address: <input type="text" ng-model="address" />
<button ng-click="getAddrress(address)"> Pass Address to Controllerone</button>
</div>
<br />
</div>
</div>
</body>
</html>