Communicate Between Controllers

AngularJS: Communicate Among Controllers

Working with AngularJS has made things very easy for front-end developers. We can handle almost everything with Controllers.

Parent-Child Controllers

There are times when we needed to work with more then one controllers and we need to communicate between those controllers. It would be easy to communicate between controllers if they are in parent-child relation.

Independent Controllers

In case the controllers are independent and we need to pass information on an event of one controller to another. In this case we can use $on & $broadcast with $rootScope.

Lets understand it with very simple example:

<div ng-app="myApp">
    <div ng-controller="listenController">
      <label>Value: {{value}}</label>
    </div>
    <div ng-controller="eventController">
      <input type="text" ng-model="text" class="form-control" placeholder="Input any text">
      <div class="form-group"><button ng-click="btnClick()" class="btn btn-primary">Click!</button></div>
    </div>
</div>

As you can see it’s a very basic example but it will fulfil our need. It has two controllers, listenController displays the Name and the eventController has a text entry input and a button.

Let’s start with the .js now:

var myApp = angular.module("myApp", []);

myApp.controller("listenController", ["$scope, function($scope){
    $scope.value = "Ashish";
}]);

myApp.controller("eventController", ["$scope, function($scope){
    $scope.btnClick = function(){
        console.log(Text input's value: ", $scope.text);
    }
}]);

What we want to do is get the value from the input text from eventController and show it against the “Name” in listenController. As we can see they are in different controllers so we cannot just display input’s value on “Name“. We need something to interact between those controllers.

Listen Event

First, we need to modify the listenController to listen an event which would happen on the eventController. As the event will occure on different controller we cannot use the $scope but AngularJS gives us ability to listen for and emit event on any module by injecting $rootScope in our controller.

By using $rootScope & $on we can listen any event which may broadcast on any controller on $rootScope. Let’s update our listenController to listen the event.

myApp.controller("listenController", ["$scope", "$rootScope", function($scope, $rootScope){
    $scope.value = "Ashish";

    $rootScope.$on("buttonClicked", function(event, args){
        $scope.value = args.text;
    });
}]);

Here, we can see that $on event has two arguments, first is the name of the event which would fire on $rootScope and function with event and data.

Fire Event

Last, we need to update the eventController to broadcast the click event of a button on $rootScope.

myApp.controller("eventController", ["$scope", "$rootScope", function($scope, $rootScope){
    $scope.btnClick = function(){
    console.log("Text input's value: ", $scope.text);
        $rootScope.$broadcast('buttonClicked', {text: $scope.text});
    }
}]);

So, now whenever we click on the “Click!” button it will broadcast the event and wherever we have listen “buttonClicked” event with $on listener, it will update the value.

My CodePen with the same example.

Kindly let me know your feedbacks/suggestions in comment below.

 

Hope this helps!

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

Leave a reply:

Your email address will not be published.