AngularJS - two way binding

Question

I have the following JSFiddle

I want two way binding for these sliders that will eventually set the value in the service
Meaning that the on is changed also the second and the value in the service also

HTML:

<div>    
    <div ng-controller="FirstCtrl">
         <input type="range" ng-model="speakerVolume" />
         {{speakerVolume}}
    </div>
    <div ng-controller="SecondCtrl">
        <input type="range" ng-model="speakerVolume" />
        {{speakerVolume}}
    </div>
</div>

JS:

var myApp = angular.module('myApp', []);

myApp.controller('FirstCtrl', function($scope, voipService) {
  $scope.speakerVolume = voipService.speakerVolume;
  $scope.$watch("speakerVolume", function (newValue) {
      voipService.speakerVolume = newValue;
      voipService.setVolume(newValue);
  });
});

myApp.controller('SecondCtrl', function($scope, voipService) {
  $scope.speakerVolume = voipService.speakerVolume;
  $scope.$watch("speakerVolume", function (newValue) {
      $scope.speakerVolume = newValue;
      voipService.setVolume(newValue);
  });
});

myApp.service('voipService', function() {
    this.speakerVolume = 50;

    this.setVolume = function(newVal){
        self.speakerVolume = newVal;
    }
});

Final Answer in Fiddle:
Fiddle - Final Answer

doodeec · Accepted Answer · 2014-02-19 14:14:41Z

1

one way is to watch also service value, not just scope variable

var myApp = angular.module('myApp', []);

myApp.controller('FirstCtrl', function($scope, voipService) {
  $scope.speakerVolume = voipService.speakerVolume;
  $scope.$watch("speakerVolume", function (newValue) {
      voipService.speakerVolume = newValue;
  });
  $scope.$watch(function() {
      return voipService.speakerVolume;  
  }, function (newValue) {
      $scope.speakerVolume = newValue;
  });
});

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

myApp.service('voipService', function() {
    var self = this;
    this.speakerVolume = 50;

    this.setVolume = function(newVal){
        self.speakerVolume = newVal;
    }
});

second way is to use $broadcast in the service (when the value is changed) and update values in all controllers when this custom event is fired

edited Feb 19, 2014 at 14:14

answered Feb 19, 2014 at 13:41

doodeec

2,92722 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

liorafar Over a year ago

Thanks. but it's not working for both ways. when slide with the second slider it does not move the first slider.

doodeec Over a year ago

that's because you don't define a self variable in voipService, I overlooked it... try it now

liorafar Over a year ago

You are right ! I've added the last edited answer in fiddle to the question. Thank you !

Collectives™ on Stack Overflow

AngularJS - two way binding

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related