Question

我有两种不同的视图，它们都有音量滑块我有$ watch每个音量滑块模型，当它被更改时我调用setVolume方法。

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

我希望以一种方式观看改变的音量，每当我改变一个滑块的音量时，它也会在第二个滑块中改变。
我听说我可以将模型放在$ rootScope中，然后观察它还有其他解决方案吗？
感谢

Answer 1

您可以使用以下函数设置第一个参数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

Answer 2

使用观察者总是很难看。

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

服务是单身，角度只有一个实例。如果在服务上设置属性，将服务传递给控制器并将此属性绑定到范围，则不会丢失双向绑定。

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

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

2 个答案: