Communication between controllers in Angular

All we need is an easy explanation of the problem, so here it is.

I’m familiar with the following methods to implement communication between controllers.

Are there others? Are there better approaches / best practices?

$broadcast/$emit

.controller("Parent", function($scope){
  $scope.$broadcast("SomethingHappened", {..});
  $scope.$on("SomethingElseHappened", function(e, d){..});
})
.controller("Child", functions($scope){
  $scope.$broadcast("SomethingElseHappened", {..});
  $scope.$on("SomethingHappened", function(e, d){..});
})
.controller("AnotherChild", functions($scope){
  $scope.$on("SomethingHappened", function(e, d){..});
});

or, from the View:

<button ng-click="$broadcast('SomethingHappened', data)">Do Something</button>

Advantages:

  • Good for one-time events

Disadvantages:

  • Does not work between siblings, unless a common ancestor, like $rootScope, is used

Scope inheritance of functions

<div ng-controller="Parent">
  <div ng-controller="Child">
    <div ng-controller="ChildOfChild">
       <button ng-click="someParentFunctionInScope()">Do</button>
    </div>
  </div>
</div>

or, in code

.controller("ChildOfChild", function($scope){
   $scope.someParentFunctionInScope();
});

Advantages:

  • Good for top-to-bottom data propagation

Disadvantages:

  • Not-as-good for bottom-to-top, since it requires an object (as opposed to a primitive)
  • Calling ancestor functions creates a tight coupling
  • Does not work between siblings, unless a common ancestor, like $rootScope, is used

Scope inheritance + $watch

Controllers only react to change in scope-exposed data and never call functions.

.controller("Parent", function($scope){
  $scope.VM = {a: "a", b: "b"};
  $scope.$watch("VM.a", function(newVal, oldVal){
    // react
  });
}

Advantages:

  • Good for child scope not created by controllers, e.g. like within ng-repeat

Disadvantages:

  • Doesn’t work at all for one-time events
  • Not very readable code

Other notable mentions:

  • Shared Service with specialized functionality
  • More general Pub/Sub Service
  • $rootScope

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

As Samuel said, using a service to sharing data is a recommended method. The idea is that the state of the data are maintained consistently, regardless of any controller.
This two articles can give you an idea of “how to” and “why”: Sharing Data Between Controllers, The state of angularjs controllers.

Method 2

I use functionality-specific shared services to communicate between controllers.

You can create a generic shared service to have a central point to subscribe to and broadcast events, but I find functionality-specific services to be easier to maintain over time, especially as the project and team grows.

Method 3

— There is another option to inheritance and share data between your controllers:

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

    var parent = function($scope){
        $scope.parent = {
             parentData: 'some data'
        }
    };

    // you could do some prototyping as well
//parent.prototype.parent2 = {
//    parentData: 'some more data'
//};

    var child = function($scope){
        parent.call(this, $scope);
        //$scope.parent2 = this.parent2; here is how you access that data.
    };
    child.prototype = Object.create(parent.prototype);
    child.prototype.constructor = child;


app.controller('parent', parent);

app.controller('myController', child);

This approach give you an advantage:

  • Works with siblings scopes and DOM structure is not needed.

You could continue working with the objects creating custom properties, ‘freezing’ the data variables to persist the same data and ensure data is not modified, etc.

At the end, I prefer to use a service to share data between controllers and use the observer pattern or pub/sub with rootscope emit/on to acknowledge of actions within controllers.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply