AngularJS - 如何在不使用 $rootScope 的情况下观察两个控制器中使用的模型答案

【问题标题】：AngularJS - How to watch model that is used in two controllers without using $rootScopeAngularJS - 如何在不使用 $rootScope 的情况下观察两个控制器中使用的模型
【发布时间】：2014-03-19 15:17:59
【问题描述】：

我有两个具有音量滑块的不同视图。
对于每个音量滑块模型，我都有 $watch ，当它发生变化时，我调用 setVolume 方法。

$scope.$watch("speakerVolume", function () {
   voipService.SpeakerVolumeChange($scope.speakerVolume * 655);  
});

我想以这样一种方式观看更改后的音量，即每当我在一个滑块中更改音量时，第二个滑块中的音量也会随之更改。
我听说我可以把模型放在 $rootScope 中然后观察它。
还有其他解决方案吗？
谢谢

【问题讨论】：

标签： angularjs view angularjs-scope uislider watch

【解决方案1】：

使用观察者总是有点难看。

也许这个https://egghead.io/lessons/angularjs-sharing-data-between-controllers 会帮助你。

服务是单例的，角度只有 1 个实例。如果您在服务上设置属性，将服务传递给控制器并将此属性绑定到范围，它不会松开 2-way 绑定。

我建议您在服务中使用观察者并有 2 个变量：1 观察者正在观察，1 实际携带值。

【讨论】：

【解决方案2】：

您可以使用如下函数设置第一个参数 watchExpression：

app.controller('MainCtrl', function($scope, voipService) {
  $scope.speakerVolume = voipService.speakerVolume;
  $scope.$watch("speakerVolume", function (newValue) {
    voipService.speakerVolume = newValue;
  });
});

app.controller('SecondCtrl', function($scope, voipService) {
  $scope.$watch(function () { return voipService.speakerVolume }, function (newValue) {
    $scope.speakerVolume = newValue;
  });
});

app.service('voipService', function() {
  this.speakerVolume = 2;
});

有两个数据绑定：

<p ng-controller="MainCtrl">
  <input ng-model="speakerVolume" />
  {{speakerVolume}}
</p>
<p ng-controller="SecondCtrl">{{speakerVolume}}</p>

Plunker

【讨论】：

谢谢。这是一个很好的解决方案，但它不适合我的问题，因为我需要它的两种方式绑定，而这里它是一种方式。如果我做两块手表，我会以循环结束。