AngularJS Share data between Controllers when variable is set on another Controller

Question

I need to share data between two controller (controller A and controller B). I have a service in place to share the data. This works and controllerB can see the value that controllerA sets if I'm setting the value of the shared variable using "ng-model=shared.id" from the view, however; if I set the shared variable inside of the controllerA, then controllerB doesn't see it.

     app['controller']('controllerA', ['shared', function(shared){

          //ControllerB will not see this for some reason, unless I set
          //the value from the view using the ng-model=shared.id attribute.
          shared['id'] = "123";   

     }]);

     app['controller']('controllerB', ['shared', function(shared){

         this['someId'] = shared['id'];   

     }]);

Well - you have to re-assign it! You're not passing a reference to the service value - you're passing it as is at that time. — tymeJV
– tymeJV, Commented Nov 4, 2016 at 13:04
I don't understand "passing it as is at the time". Should I create another variable this['id'] = "123" then assign that to shared variable (shared['id'] = this['id']) — drivers34
– drivers34, Commented Nov 4, 2016 at 13:11
See the answer below - basically - when you update the shared variable, anything using that variable also needs to be updated, the changes aren't picked up automatically. Meaning in controller be - you have to recall this['someId'] = shared['id']; when the shared variable updates. — tymeJV
– tymeJV, Commented Nov 4, 2016 at 13:15

Aruna · Accepted Answer · 2016-11-04 13:10:17Z

1

Your code will change the service value without any issues. But the issue is controllerB won't be aware of the value change as there is no $digest cycle called.

When you change the value of $scope model, $digest loop will fire and the change carried forward to controllerB.

You can try as below,

app['controller']('controllerA', ['$scope', 'shared', function($scope, shared){
          $scope.shared = shared;
          //ControllerB will not see this for some reason, unless I set
          //the value from the view using the ng-model=shared.id attribute.
          $scope.shared['id'] = "123";    // This will trigger the $digest cycle

     }]);

     app['controller']('controllerB', ['shared', function(shared){

         this['someId'] = shared['id'];   

     }]);

answered Nov 4, 2016 at 13:10

Aruna

12k3 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aruna Over a year ago

@drivers34 Great :-)

Abdul Mateen Mohammed · Accepted Answer · 2016-11-04 13:31:03Z

When the shared data is updated in the service object from one Controller the other Controller cannot know it automatically, there has to be some way to convey such as "Hey, I've updated the shared data if anybody is using it please go ahead and fetch the updated data", this can be done using events in AngularJS by using $broadcast, $on, $emit functions on the $scope object and on the $rootScope service.

Check the below example using $broadcast function on the $rootScope to invoke an event (such as the shared id got changed) on all the child scopes (i.e. broadcast will send a message to all the child scopes), the child scopes interested in an event will listen for that event using the $on function.

angular
  .module('demo', [])
  .controller('ControllerA', ControllerA)
  .controller('ControllerB', ControllerB)
  .factory('shared', shared);

ControllerA.$inject = ['$rootScope', 'shared'];

function ControllerA($rootScope, shared) {
  var vm = this;
  shared.id = 123;
  vm.id = shared.id;
  vm.updateId = updateId;

  function updateId(id) {
    shared.id = id;
    $rootScope.$broadcast('idChanged');
  }
}

ControllerB.$inject = ['$scope', 'shared'];

function ControllerB($scope, shared) {
  var vm = this;
  vm.id = shared.id;
  $scope.$on('idChanged', idChanged);

  function idChanged(event) {
    vm.id = shared.id;
  }
}

function shared() {
  var service = {
    id: 0
  };

  return service;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="ControllerA as ctrlA">
    Controller A: {{ctrlA.id}}
    <input type="text" name="id" ng-model="ctrlA.id" ng-change="ctrlA.updateId(ctrlA.id)" />
  </div>
  <div ng-controller="ControllerB as ctrlB">
    Controller B: {{ctrlB.id}}
  </div>
</div>

Thanks, learned a lot from your response...It caused me to dig a little deeper and find out more about this.

Collectives™ on Stack Overflow

AngularJS Share data between Controllers when variable is set on another Controller

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related