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

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

  1. 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.

  2. Pingback: What to Expect and How to Prepare for Your Angular.js Interview: Part 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s