AngularJS communicating between controllers

The previous posts covered  AngularJS big picture : Overview and  Working with Angular JS and jQuery UI : writing a custome directive. Let's look at inter controller communication in this blog post.

Q. How do you communicate between controllers in AngularJS?
A. There are scenarios where you want to communicate between controllers. For example, when the submit button is clicked on the parent controller, some values need to be passed to the child controller to show or hide a button in the child form. In AngularJS you can do this with $watch and $broadcast on the parent controller and $on on the child controller.


$watch(watchExpression, listener, objectEquality) : Registers a listener callback to be executed whenever the watchExpression changes.

$broadcast(name, args) : Dispatches an event name downwards to all child scopes (and their children) notifying the registered ng.$rootScope.Scope#$on listeners.

Here is the sample code:

   $scope.buttonClicked = 'N';

   //invoked when $scope.buttonClicked value changes
   $scope.$watch('buttonClicked', function(message) {
  //pass val = 'Y'
  if (message != null) {
   $scope.$broadcast('buttonClicked', {
     "val" : message
   });
   $scope.buttonClicked = 'N';
  }
 });
 
 //when submit button is clicked
 $scope.onParentSubmitButtonClick = function() {
  $scope.buttonClicked = 'Y';
  if ($scope.clientId && $scope.valuationDate) {
   $scope.httpError = null;
    $scope.getCalcStatuses();
   } else {
    $scope.httpError = "Client id or valuation date can not be empty !!";
   }

 };
    

Now, in the child controller, you want to pass the value "val" to indicate that "submit" button has been clicked. "$scope.$broadcast" invokes $scope.$on on the child controllers.

  $scope.$on('buttonClicked', function(event, args) {
  if (args.val == 'Y') {
   $scope.filterText = null;
  }
   
  $timeout(function() {
   $scope.isReleasable(); 
   $scope.isSavable();
          console.log('update with timeout fired');
     }, 2000);
     
  $scope.isReleasable = function() {
   if ($scope.calcViewStatuses != null) { 
    if ($scope.calcViewStatuses.ragStatus == 'GREEN' && $scope.calcViewStatuses.releaseStatus != 'RELEASED') {
     $scope.showReleaseButton = true;
     } else {
     $scope.showReleaseButton = false;
    }
   }
  };
    
    
  $scope.isSavable = function() {
   if ($scope.calcViewStatuses != null) { 
    if ($scope.calcViewStatuses.releaseStatus == 'RELEASED') {
     $scope.showSaveButton = false;
    } else {
     $scope.showSaveButton = true;
    }
   }
  };
   
 });
    

If you want to do the reverse, i.e. communicate from child to parent, you use the $scope.$emit.

$emit(name, args): Dispatches an event name upwards through the scope hierarchy notifying the registered ng.$rootScope.Scope#$on listeners.