CODEWITHSUNDEEP
angularjs
Sunny
Sunny

Reputation: 3

How to make 2 different controller update and retrieve common data using scope variable and .Service getter setter method in angularjs

I want a angularjs code in which 1 controller is using .service set method to set the value and another controller using the .service get method to retrieve that value. also i tried this code please let me know why it is not printing the right output.

i tried this code but after setting value it is not printing value...can you help me out in this .. 

    <html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>
    <script>
    var app = angular.module('myApp', []);

app.service('sharedProperties', function() {
   var stringValue = ' ';

    return{
        getString: function() {
            return stringValue;
        },
        setString: function(value) {
            stringValue = value;

        }
    }});

app.controller('get', function($scope,sharedProperties) {
    $scope.stringValue = sharedProperties.getString();

});
app.controller('set', function($scope, sharedProperties) {

    $scope.setString = function(newValue) {
        $scope.objectValue.data = newValue;
        sharedProperties.setString(newValue);
    };
});

  </script>
   </head>
    <body ng-app="myApp">
      <div ng-controller="set">
        <input type=text ng-model="newValue">
        <button onclick="setString(newValue)" >Click here</button>
       </div>
       <div ng-controller="get">
           value is {{stringValue}}
        </div>
    </body>
</html>

Answers will be appreciated.

Upvotes: 0

Views: 474

Answers (1)

Tomas
Tomas

Reputation: 2726

I dont understand what is stopping you? Just read the angular docs https://docs.angularjs.org/guide/services

Quick fiddle

angular.module('serviceApp',[]);

angular.module('serviceApp').service('SharedService',[function(){
  var value = '';
  this.set = function(val){
    value = val;
  };
  this.get = function(val){
    return value;
  }
}]);

angular.module('serviceApp').controller('OneCtrl',['$scope','SharedService',function($scope,sharedService){
  $scope.form = {value:''}
  $scope.setValue = function(){
    sharedService.set($scope.form.value);
  }
}]);

angular.module('serviceApp').controller('TwoCtrl',['$scope','SharedService',function($scope,sharedService){
  $scope.value = sharedService.get();
  
  $scope.getValue = function(){
    $scope.value = sharedService.get();
  }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="serviceApp">
  <div ng-controller="OneCtrl">
    <input ng-model="form.value" type="text" />
    <button type="button" ng-click="setValue()">Set</button>
  </div>
  <div ng-controller="TwoCtrl">
    <button type="button" ng-click="getValue()">Get</button>
    Value: {{value}}
  </div>
</div>

Upvotes: 1

Related Questions