Angular.js two way data binding between two nested controllers

Question

Im curious, is there a proper way that one should handle/implement 2 way data binding between 2 nested controllers. Let me explain the scenario.

I have a formController in which has some form elements. One of the form elements is a multiselect widget, for which i created a partial html that i can use in other places, and this partial runs with a separate Controller, lets calle it multiSelectController (note, this controller/partial/view is nested within the form/formController).

What i want is to be able to have the formController (which has the data), to pass in a list of "selected" items, like [1, 3, 7, 10] to the multiselect partial, which will then be able to render the widget with the correct items selected. And at the same time, when an item gets deselected or selected from the multiselect partial, i want to be able to pass the new selected list to the formController/scope (so i can display saying 1, 3, 5 are now selected).

So to simplify the question, i want to know what is the best/corerct way to pass in a model/variable to a child view/controller while retaining the databinding, thus the child view/controller can make changes to the said variable within it while it updates the parent.

Manish Kr. Shukla · Accepted Answer · 2014-11-24 04:47:14Z

2

The best way according to me is :

Create a service, that will hold all the model variables.

angular.service("dataService", function() {

    this.value1 = "";
    this.value2 = "";
});

reference that service in your controllers, saving their reference in the scope.

angular.controller("myCntrl1", function($scope, dataService) {
    $scope.dataService = dataService;
});


angular.controller("myCntrl2", function($scope, dataService) {
    $scope.dataService = dataService;
});

Now in your html, you refer all your modal variables using the service reference :

    // Controller 1 view
    <div ng-controller="myCntrl1">
        <input type="text" ng-model="dataService.value1" />
    </div>

    // Controller 2 view
    <div ng-controller="myCntrl2">
        The value entered by user is {{dataService.value1}}
    </div>

answered Nov 24, 2014 at 4:47

Manish Kr. Shukla

4,4771 gold badge22 silver badges35 bronze badges

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

2 Comments

decay Over a year ago

This is not what i want. Using services are great, but for my scenario this is a bad idea (otherwise i will get 100's of services for a very simple case).

Manish Kr. Shukla Over a year ago

How can you end up with hundred of services @decay ?? Why can't you use a single or couple of services to hold everything that you need to persist ??

RahulB · Accepted Answer · 2014-11-24 04:49:22Z

1

Since formController is a parent controller, you need not worry about accessing its model/varaibales, just add $parent in child's scope to access any parent property

$scope.$parent.someProperty

So, if you change or update this variable, it will automatically updated in parent's scope also.

answered Nov 24, 2014 at 4:49

RahulB

2,1101 gold badge21 silver badges28 bronze badges

4 Comments

decay Over a year ago

was aware of this and this is correct, but unsure if this is the correct way. Was looking for more of a way to "pass" child view/controller a set of input values/objects that it can edit while keeping the 2 way binding. Can easily achieve that with a Directive by passing in attributes, but isnt there a way to do it without a new directive (and to pass specific objects instead of the child calling and looking for parent objects)?

RahulB Over a year ago

@decay : There is nothing wrong about this approach. See, anyway you have to change an object/variable which is in parent's scope via child controller. You can also do it directly using $scope of child controller and it will look for that variable in prototypical chain & access it. $scope.$parent is faster! And you can change specific parent objects only. It will not effect other objects of parent's scope.

RahulB Over a year ago

@decay : Also this approach is important since you need to maintain two way binding and that can only be achieved by updating the object in parent's scope. A local variable update will not be visible in parent's scope.

V Maharajh Over a year ago

I almost adopted this approach. However I realized that it wouldn't work if my parent controller had two instances of the same controller as children. The children would overwrite eachother's 'someProperty'.

Collectives™ on Stack Overflow

Angular.js two way data binding between two nested controllers

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related