Angular JS – Communicating between controllers with $rootScope, $broadcast() and $on()

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