-1

I am trying to pass information from one controller to another using a service.

It works fine, but in the following snippet/Fiddle, I have to:

  • type value in input
  • click "Set value" button from FirstController
  • click "Get value" button from SecondController
  • The value is now displayed

I want the updated value to be automatically displayed in SecondController.

angular.module('app', []);
angular.module('app').factory('StoreService', function () {
    var storedObject;
    return {
        set: function (o) {
            this.storedObject = o;
        },
        get: function () {
            return this.storedObject;
        }
    };
});

angular.module('app').controller('FirstController', function ($scope, StoreService) {
    $scope.setValue = function (value) {
        StoreService.set(value);
    };
});

angular.module('app').controller('SecondController', function ($scope, StoreService) {
    $scope.getValue = function () {
        $scope.value = StoreService.get();
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="FirstController">
        <fieldset>
            <legend>FirstController:</legend>
            <input type="text" ng-model="value" />
            <button ng-click="setValue(value)">Set value</button>
        </fieldset>
    </div>
    <div ng-controller="SecondController">
        <fieldset>
            <legend>SecondController:</legend>
            <button ng-click="getValue()">Get value</button>
            Value: {{value}}
        </fieldset>
    </div>
</div>

Fiddle

Community
  • 1
  • 1
jose
  • 1,044
  • 1
  • 12
  • 35
  • 1
    If they're on the same page and dealing with the same data, why have two separate controllers? – rrd May 02 '17 at 12:14

1 Answers1

2

A solution would be using your factory to return an object (with your property). In your controllers you will be able to use this object as a reference, it will be auto-updated:

Forked your Fiddle here

angular.module('app', []);
angular.module('app').factory('StoreService', function() {
  return {
    storedObject: ''
  };
});

angular.module('app').controller('FirstController', function($scope, StoreService) {
  $scope.value = StoreService;

});

angular.module('app').controller('SecondController', function($scope, StoreService) {
  $scope.value = StoreService;

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="FirstController">
    <fieldset>
      <legend>FirstController:</legend>
      <input type="text" ng-model="value.storedObject" />
      <button ng-click="setValue(value)">Set value</button>
    </fieldset>
  </div>
  <div ng-controller="SecondController">
    <fieldset>
      <legend>SecondController:</legend>
      Value: {{value.storedObject}}
    </fieldset>
  </div>
</div>
Community
  • 1
  • 1
Mistalis
  • 17,793
  • 13
  • 73
  • 97
  • working fine i have another may be replace textbox into dropdown i want bind the value based on dropdown selection dropdown one controller table is another controller – jose May 02 '17 at 12:24
  • @jose It works the same way: save the dropdown value in your service, return the reference. :) – Mistalis May 02 '17 at 12:27
  • i try yar but table will not refreshing help how to solve – jose May 02 '17 at 12:30
  • dropdown values are shown crctly but how to trigger the refresh function in controller2 page – jose May 02 '17 at 12:42
  • 1
    @jose I can't really help you without code. It seems to be a different question. Could you [post another question](http://stackoverflow.com/questions/ask) for this issue? – Mistalis May 02 '17 at 12:50
  • Thank for your reply okay let me explain I have one doubt when values that means service values are changed I want trigger some function how to do help @mistalis sry i am not able to post again it's show post limit – jose May 02 '17 at 13:03
  • @ Mistalis any suggestions – jose May 02 '17 at 13:28
  • http://stackoverflow.com/questions/43751225/auto-trigger-function-throuigh-service-in-angularjs#43751225 @ Mistalis – jose May 03 '17 at 04:53