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).

Is no one capable of answering the question? Alas ... ;(

Deadpool
– Deadpool

2016-09-27 07:48:34 +00:00
Commented Sep 27, 2016 at 7:48 — Deadpool
– Deadpool, Commented Sep 27, 2016 at 7:48
Try this: stackoverflow.com/questions/21919962/…

Michał Styś
– Michał Styś

2016-09-27 07:51:49 +00:00
Commented Sep 27, 2016 at 7:51 — Michał Styś
– Michał Styś, Commented Sep 27, 2016 at 7:51
@Peterson I'm on the way :)

Pankaj Parkar
– Pankaj Parkar

2016-09-27 07:52:43 +00:00
Commented Sep 27, 2016 at 7:52 — Pankaj Parkar
– Pankaj Parkar, Commented Sep 27, 2016 at 7:52
So the most active person at SO .. speaks up! ;)

Deadpool
– Deadpool

2016-09-27 07:53:34 +00:00
Commented Sep 27, 2016 at 7:53 — Deadpool
– Deadpool, Commented Sep 27, 2016 at 7:53
@MichałStyś: Already, saw that before posting!

Deadpool
– Deadpool

2016-09-27 07:54:25 +00:00
Commented Sep 27, 2016 at 7:54 — Deadpool
– Deadpool, Commented Sep 27, 2016 at 7:54

ram1993 · Accepted Answer · 2016-09-27 07:58:35Z

1

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>

answered Sep 27, 2016 at 7:58

ram1993

9711 gold badge9 silver badges13 bronze badges

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

2 Comments

Pankaj Parkar Over a year ago

Polluting $rootScope would be a bad idea

Deadpool Over a year ago

This works ... GG good! Though I think Pankaj is right, but pankaj your code above not working out in plunker!

ram1993 · Accepted Answer · 2016-09-27 11:12:47Z

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>

Pankaj Parkar · Accepted Answer · 2016-09-27 14:15:03Z

1

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

edited Sep 27, 2016 at 14:15

answered Sep 27, 2016 at 7:54

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

5 Comments

Deadpool Over a year ago

Pankaj in Plunker the value is not getting updated in second div as is filled and seen changed in first div! Pl check ...

Deadpool Over a year ago

Both of your fiddles are not working. Pl, have a view! (Try change text in input)

Pankaj Parkar Over a year ago

@Peterson plunkr seems down. isitdownrightnow.com/plnkr.co.html

Deadpool Over a year ago

P - Thanks Buddy!

Pankaj Parkar Over a year ago

@Peterson now they are fixed, Thanks :)

Collectives™ on Stack Overflow

Sharing data in Controller in the example - AngularJs

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related