0

I've been thinking about this topic for a while and I've seen most of the threads pertaining to communication between controllers. It's simple to share data between controllers, I built out this simple fiddle to demonstrate what I've managed to understand so far.

JS fiddle link - http://jsfiddle.net/fb3qyuat/2/

Code Snippet

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

myApp.controller('Ctrl1', ['$scope', 'shareData', function($scope, shareData) {
    $scope.person = {
        name: 'Joe',
        age: '35',
        occupation: 'Pizza Chain Owner'
    };
    $scope.changeData = function(data) {
       shareData.setData(data);
    };
    $scope.getData = function(data) {
       $scope.person = shareData.getData();
    };
}]);

myApp.controller('Ctrl2', ['$scope', 'shareData', function($scope, shareData) {
    $scope.person = {
        name: 'Dr Dre',
        age: '30',
        occupation: 'Rapper'
    };
    $scope.changeData = function(data) {
       shareData.setData(data);
    };
    $scope.getData = function(data) {
       $scope.person = shareData.getData();
    };
}]);

myApp.controller('Ctrl3', ['$scope', 'shareData', function($scope, shareData) {

    $scope.changeData = function(data) {
       shareData.setData(data);
    };
    $scope.getData = function(data) {
       $scope.person = shareData.getData();
    };

}]);

myApp.factory('shareData', function() {
    var shareData = {};

    shareData.setData = function(dataEntered) {
        shareData = dataEntered;
    };

    shareData.getData = function() {
      return shareData;  
    };

    return shareData;
});

Where I get confused is what is the best way to notify other controllers that rely on this new and updated data. I know some ways of doing this but a developer friend of mine is very against GOTO events ($broadcast, $on, $emit).

Is there any other way of notifying a particular controller about a change in data when another controller updates the data?

Follow up question: If event based notification is really the only legitimate option where is the best place to handle the $broadcast or $emit. Inside of the service using the $rootscope (sounds like a no-no) or inside the controller after updating the data.

Pedro
  • 67
  • 8
  • http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs ;) – DeadCalimero Sep 24 '14 at 04:17

2 Answers2

0

One option is to make a service that stores and exposes the shared data. Then, take a dependency on the service in each controller. Setup a watch in your controller that watches the value of the shared data on the service. The watch will fire any time the data in the service changes. Just be careful to avoid creating an event cycle.

Technically, you don't even need a service. You just need a place that stores shared data, which it looks like you have. For your example, you could just put a $watch on getData(), like so:

http://jsbin.com/qezoyevuqiko/1/

Just be aware of the downfalls of using watches. They can be expensive if your watch evalation function is slow. In that case, maybe you store with the data a hash code or some sort of flag that makes evaluating if a change has been made more efficient.

John Kurlak
  • 6,594
  • 7
  • 43
  • 59
0

I appreciate the solution John but I think I have found a better way that doesn't use watch or any other event GOTOs. Here it is in this jsfiddle. http://jsfiddle.net/ge9esec4/

It was actually much easier than I thought. Essentially a factory would hold your object like we did before but instead of creating the obj inside the controller, it is created inside the factory and then injected into the controllers via DI. Once inside the controllers you can manipulate the data however you please and they will essentially be a reference to the original which is inside the factory. I think this is a much more efficient solution.

Pedro
  • 67
  • 8