更改时，自动对几个控制器的服务值进行自动恢复

Question

我正在尝试使用服务将信息从一个控制器传递给另一个控制器。

它可以正常工作，但是在以下片段/小提琴中，我必须：

• 输入中的类型值
• 单击"设置值"FirstController的按钮
• 单击"获取价值"SecondController的按钮
• 现在显示该值

我希望更新的值自动显示在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>

小提琴

Answer 1

解决方案将使用您的factory返回对象(带有您的属性(。在您的控制器中，您将能够使用此对象作为参考，它将自动更新：

在这里分配您的小提琴

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>