Sharing data in Controller in the example - AngularJs

Question

Making simple program to share data as input in one to be updated in other through custom service only. I am writing bit of code I can, but need help to get it working for both controllers. Can someone help?

SNIPPET:

<html>

<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
</head> 

<body ng-app="myApp"> 

<div class="div1" ng-controller="myCtrl1"> 
    <input type="text" ng-model="name"> <span>{{name}}</span>
</div> 

<div class="div2" ng-controller="myCtrl2"> 
    <span>{{name}}</span> 
</div> 

<script> 
//app declaration
var app = angular.module("myApp",[]);

//controllers declaration
app.controller('myCtrl1',function($scope, dummyService){
    $scope.name = "Peter";
});

app.controller('myCtrl2',function($scope, dummyService){
    $scope.name = "Roger";
});

//service declaration
app.service('dummyService',function(){
    this.name = "Martin";
});

</script> 

</body> 

</html>

REQUIREMENT:

As soon as I start typing text in input box. It must start updating the same immediately in both the spans (viz in div1 and in div2).

Try this: http://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers — Michał Styś, Sep 27 '16 at 07:51
For your requirement you can use $rootScope , But I dont know if it is best to do — Ujjwal kaushik, Sep 27 '16 at 07:56
Hmmm .... wanted to use Service for this only! For experience .. and heard it is best method for data sharing in AngularJs! — Deadpool, Sep 27 '16 at 07:57
@Peterson Yes, I felt bad, after 15 mins no one answered this, So I did it for you, Thanks :) Please check updated answer I update both the way — Pankaj Parkar, Sep 27 '16 at 08:06

Pankaj Parkar · Answer 1 · 2016-09-27T14:15:03.493

1st thing you haven't binded service variable with $scope variable, but that is not going to fix it.

The problem is, you are using primitive type variable where you assigned new value to variable each time it changes the reference of that object. You can solve this problem easily by changing it to reference type object. There by binding object references you ensure that whenever object properties changes it will change the copy of underlying object which it points to. Likewise here we pointed our service model variable with scope's model object they will ensure to keep in sync.

Markup

<body ng-app="myApp">

  <div class="div1" ng-controller="myCtrl1">
    <input type="text" ng-model="model.name"> <span>{{name}}</span>
  </div>

  <div class="div2" ng-controller="myCtrl2">
    <span>{{model.name}}</span>
  </div>

</body>

Code

app.controller('myCtrl1', function($scope, dummyService) {
  $scope.model = dummyService.model;
});

app.controller('myCtrl2', function($scope, dummyService) {
  $scope.model = dummyService.model;
});

//service declaration
app.service('dummyService', function() {
  this.model = {
    name: "Martin"
  };
});

Demo

You can achieve the same thing with primitive type as well, with what you had in your question. But for the same you have to write getter & setter to set variable value. You could change service to below

app.service('dummyService', function() {
  var self = this;
  var name = "Martin"; //private variable

  self.setName = function(name) {
    name = name;
  }
  self.getName = function() {
    return name;
  }
});

Plunkr Here

Pankaj in Plunker the value is not getting updated in second div as is filled and seen changed in first div! Pl check ... — Deadpool, Sep 27 '16 at 08:13
Both of your fiddles are not working. Pl, have a view! (Try change text in input) — Deadpool, Sep 27 '16 at 08:21
@Peterson plunkr seems down. http://www.isitdownrightnow.com/plnkr.co.html — Pankaj Parkar, Sep 27 '16 at 09:12

score 1 · Accepted Answer · answered Sep 27 '16 at 07:58

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

//controllers declaration
app.controller('myCtrl1',function($scope, dummyService, $rootScope){
    $scope.name = "Peter";
    $scope.change = function() {
      $rootScope.$emit('changeName',{name:$scope.name});
    }
});

app.controller('myCtrl2',function($scope, dummyService, $rootScope){
    $scope.name = "Roger";
    $rootScope.$on('changeName', function(event,data) {
      $scope.name = data.name;
    })
});

//service declaration
app.service('dummyService',function(){
    this.name = "Martin";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp"> 

<div class="div1" ng-controller="myCtrl1"> 
    <input type="text" ng-model="name" ng-change="change()"> <span>{{name}}</span>
</div> 

<div class="div2" ng-controller="myCtrl2"> 
    <span>{{name}}</span> 
</div> 
 
</body>

This works ... GG good! Though I think Pankaj is right, but pankaj your code above not working out in plunker! — Deadpool, Sep 27 '16 at 08:14

score 1 · Answer 3 · answered Sep 27 '16 at 11:12

You can achieve this through method reference. Considering, you need to initialize both name variables with different values. Otherwise, you can simply use service variable.($scope.name = dummyService.name)

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

//controllers declaration
app.controller('myCtrl1',function($scope, dummyService, $rootScope){
    $scope.name = "Peter";
    $scope.change = function() {
      dummyService.setName($scope.name);
    }
    
    
});

app.controller('myCtrl2',function($scope, dummyService, $rootScope){
    $scope.name = "Roger";
    $scope.change = function(name) {
      $scope.name =  name;
    }
    $scope.init = function() {
      dummyService.set($scope.change);
    }
    $scope.init();
});

//service declaration
app.service('dummyService',function(){
    this.name = "Martin";
    this.set = function(method) {
      this.setName = method;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp"> 

<div class="div1" ng-controller="myCtrl1"> 
    <input type="text" ng-model="name" ng-change="change()"> <span>{{name}}</span>
</div> 

<div class="div2" ng-controller="myCtrl2"> 
    <span>{{name}}</span> 
</div> 
 
</body>

Sharing data in Controller in the example - AngularJs

3 Answers3