CODEWITHSUNDEEP
angularjs
pspahn
pspahn

Reputation: 2790

Passing data between controllers with a service

I am working on a single page form that I've decided to use Angular with as my jQuery implementation was quickly turning into spaghetti.

A primary feature of my form is that there are many separate inputs that will update the values of other inputs. Furthermore, each "input" might actually be multiple inputs (think an "inches" input with one <select> to determine whole inches, another <select> to determine fractional inches);

Right now I just want to be able to bind inputs in separate controllers so that when the value of something changes, I can see that update in another controller. Studying Angular, it looks like this is what using a service was made for.

Consider the following code (fiddle at http://jsfiddle.net/qn7yb74d/ ):

<div ng-controller="AController">
    <select name="" id="" ng-model="selected.item">
        <option value="A">Option A</option>
        <option value="B">Option B</option>
    </select>
</div>

<div ng-controller="BController">
    <input type="text" ng-model="myItem">
</div>

<script type="text/javascript">
var myApp = angular.module('myApp',[]);

myApp.service('myService', function(){
    this.selected = {
        item: 'A' // I want this to return the currently selected value - If val is changed to 'B', update the text input accordingly.
    }
});

myApp.controller('AController', ['$scope', 'myService', function($scope, myService){
    $scope.selected.item = myService.selected.item;
}]);

myApp.controller('BController', ['$scope', 'myService', function($scope, myService){
    $scope.myItem = myService.selected.item;
}]);
</script>

Simply put, I want any changes to AController's select input to be reflected in BController's input field. When you choose "Option A", I want the value ("A") to be shown in the input field.

How do I update the model in a separate controller via a service when a value changes?

Upvotes: 1

Views: 648

Answers (2)

Cirdec
Cirdec

Reputation: 24166

Copy the selected object from myService into the scope for both controllers.

myApp.controller('AController', ['$scope', 'myService', function($scope, myService){
    $scope.selected = myService.selected;
}]);

myApp.controller('BController', ['$scope', 'myService', function($scope, myService){
    $scope.mySelected = myService.selected;
}]);

In every AController or BController selected or mySelected will refer to the same object. You can bind to this object under scopes created for either AController or BController.

<div ng-controller="AController">
    <select name="" id="" ng-model="selected.item">
        <option value="A">Option A</option>
        <option value="B">Option B</option>
    </select>
</div>

<div ng-controller="BController">
    <input type="text" ng-model="mySelected.item">
</div>

I've put this in a complete working fiddle. Doing so required adding an ng-app and loading the module before onLoad.

Upvotes: 2

batmaniac7
batmaniac7

Reputation: 422

Not sure how the controllers are placed.

You may wanna have a look at this: http://onehungrymind.com/angularjs-communicating-between-controllers/

In one controller

$rootScope.$broadcast('foo',data)

In other controller

$rootScope.$on('foo', data)

Upvotes: 0

Related Questions