In this example we have an application with two controllers. How to do if the first controller want to communicate a message to the second controller? Using the $rootScope is the simplest way to do it. $rootScope is a special scope that is shared at application level, so it’s accessible from any application’s module and can be used to store information that are useful for all of them.
<div ng-app="myApp"> <h2>Controller 1</h2> <div ng-controller="myController1"> {{title}} <br /> <input type="text" ng-model="message" /> <br /> <br /> <button ng-click="sendMessage()">Send Message!</button> </div> <h2>Controller 2</h2> <div ng-controller="myController2"> {{title}} <br /> The message is: <label>{{message}}</label> <br /> <br /> <button ng-click="getMessage()">Get Message!</button> </div> </div>
angular.module("myApp.controllers").controller("myController1", ["$scope", "$rootScope", function ($scope, $rootScope) { $scope.title = "This is the controller 1"; $scope.message = ""; $scope.sendMessage = function () { //$rootScope is shared between all the application's modules. //We can use it to share information between different modules. //Here we are putting a message from our $scope to $rootScope $rootScope.message = $scope.message; } }]); angular.module("myApp.controllers").controller("myController2", ["$scope", "$rootScope", function ($scope, $rootScope) { $scope.title = "This is the controller 2"; $scope.message = ""; $scope.getMessage = function () { //$rootScope is shared between all the application's modules. //We can use it to share information between different modules. //Here we are getting a message from $rootScope to our $scope $scope.message = $rootScope.message; } }]);
$broadcast/$on to trigger proper events
Even though we can use the $rootScope to just share information between modules, it’s better to use it to trigger proper events that we can catch whenever within our application. To do this we can use the $broadcast() event of the $rootScope. On the other side any module can catch the event using the $on() method on its own $scope.
angular.module("myApp.controllers").controller("myController1", ["$scope", "$rootScope", function ($scope, $rootScope) { $scope.title = "This is the controller 1"; $scope.message = ""; $scope.sendMessage = function () { //We send a "message-event" event via $rootScope $rootScope.$broadcast("message-event", $scope.message); } }]); angular.module("myApp.controllers").controller("myController2", ["$scope", "$rootScope", function ($scope, $rootScope) { $scope.title = "This is the controller 2"; $scope.message = ""; //We catch a "message-event" event $scope.$on("message-event", function (event, args) { $scope.message = args; }); }]);
Advertisements
This example is actually just broadcasting between controllers. When angular.module(“myApp.controllers”) is called it looks for a module already created under that name so both of these controllers are actually instantiated on the same module.
Yeah that’s true. What is actually doing is to handle a simple communication between different controllers. I’ll change the title. Thanks!
Pingback: What to Expect and How to Prepare for Your Angular.js Interview: Part 1