AngularJS: Right way for communication between two controller

Question

i was looking how people write code to communicate between two controller. i got one code which is working but not sure the approach is good or standard. so review the code and tell me should we follow the approach to communicate between two controller.

<body ng-app="app">
  <div ng-controller="firstCtrl">
    controller 1
<select ng-options="item for item in items" ng-model="mdl"> 
</select> 
  <button ng-click="updateAlphabets()">update</button>
  </div>

  <div ng-controller="secondCtrl">
     controller 2
<select ng-options="item for item in items" ng-model="mdl"> 
</select>
    <button ng-click="updateItems()">update</button>
  </div>
</body>

function firstFunc($scope){
  $scope.items=["one","two","three"];
  $scope.updateAlphabets=function(){
    secondFunc($scope);
    $scope.updateItems();
  };
}

function secondFunc($scope){
  $scope.items=["apple","boy","cat"];
  $scope.updateItems=function(){
    $scope.items=["a","b","c"];
  };
}

angular.module("app",[]).controller("firstCtrl",["$scope",
firstFunc]).controller("secondCtrl",["$scope",
secondFunc]);

looking for suggestion because i am learning angular now and i am after right approach and pattern where majority of people follow. thanks

probably a duplicate http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs?rq=1 — AlainIb, Apr 20 '16 at 11:28
You have events : $emit, $on, having a parent controller from where you can read / write un his scope, use a factory, but you will have to watch for changes inside the factory to refresh the scope. — Walfrat, Apr 20 '16 at 11:54

score 2 · Answer 1 · edited May 23 '17 at 12:07

2

This question is most likely a duplicate. The most upvoted answer on this subject talks about a lot about using events to communicate between controllers. I don't think events are the correct approach.

The correct answer is with a common service.

You can create an service as a simple value store or use more elegant patterns like observables and pass information between controllers.

function ValueStore() {
    this._valueObject = {foo: 'initial value'};
}

ValueStore.prototype.getValueObject = function() {
    return this._valueObject;
}

ValueStore.prototype.setValueObject = function(valueObject) {
    this._valueObject = valueObject;
}

angular.module('app').service('valueStore', ValueStore);

Then in your controllers you can inject this service and get and set the values between controllers. You probably want to pass objects rather than values so that you can then just get the updated values by reference.

Your implementation doesn't need to match the above code. You can use properties if you wish. The idea is you use a service to pass data.

UPDATE This answer How to communicate between controllers of two different modules in AngularJs to a very similar question has a working example of communicating between two controllers using a service and object references.

edited May 23 '17 at 12:07

Community

1
1

answered Apr 20 '16 at 11:42

Martin

15,820
4
47
56

1

This doesn't work like that alone. He will have to watch the state of his factory in order to refresh the data of his scope's controller. – Walfrat Apr 20 '16 at 11:54
code is very less to understand this area. it would be better if some one discuss with small but full working code with jsfiddle. – Monojit Sarkar Apr 20 '16 at 11:59
@Walfrat the idea of this service (it is not using the factory pattern) is to use a object by reference so that you won't have to explicitly watch it. – Martin Apr 20 '16 at 12:58
if it's not only for displaying purpose only, you'll have to watch it. – Walfrat Apr 20 '16 at 13:00
@Walfrat probably not. This is how JavaScript references work. If you need to call a method when a value changes -- then you should probably be using an Observable service, or just a callback method on the service. – Martin Apr 20 '16 at 13:30

AngularJS: Right way for communication between two controller

1 Answers1