Angular multiple nested controllers

Question

I have what seems like a common problem but I can't find anything online on how to achieve what I am trying to do.

I have a search form that contains multiple instances of a common controller that I use to to perform typeahead/autocomplete searches when you type. Each controller is configured with a different parameter to lookup using different criteria. The results of the lookups need to be assigned to a parent property to perform the search based on the entered criteria. So for example:

SearchController

CleanerId
TeacherId
StudentId

And the child controller simply has the notion of a lookup control with an Id and a Text value, where the Id needs to be assigned to the appropriate parent property.

Ideally I want to bind the hidden id field of each controller to both id of the child model and a different property on the parent like below but I don't think that's possible:

< input type="hidden" ng-model="child.Id, parent.CleanerId" />

< input type="hidden" ng-model="child.Id, parent.TeacherId" />

< input type="hidden" ng-model="child.Id, parent.StudentId" />

The child controller has to be generic so how do I make the parent controller bind to the child ids?

Any help is greatly appreciated.

Dzinx · Accepted Answer · 2015-09-19 08:24:22Z

2

This is a perfect opportunity to use a directive rather than a controller for the three widgets.

When using the directive, pass the field as an argument:

<child-widget value="parent.CleanerId"></child-widget>
<child-widget value="parent.TeacherId"></child-widget>
<child-widget value="parent.StudentId"></child-widget>

And when defining the directive, pass the value in isolate scope:

app.directive("childWidget", function () {
  return {
    restrict: "E",
    scope: {
      value: "="
    },
    template: '<input type="hidden" ng-model="value" />'
  };
});

answered Sep 19, 2015 at 8:24

Dzinx

58.2k10 gold badges63 silver badges78 bronze badges

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

3 Comments

PaulMcCaffery Over a year ago

In this instance are you not passing information from the parent to child directive to initialise it? It seems directives might make more sense but how do I pass the hidden id to the parent once it has been set? Does this work in your example/

Dzinx Over a year ago

value is connected using a two-way binding, which means when the parent changes its value, it changes in the directive, and vice versa. So yes, it does work here automatically, no coding needed.

PaulMcCaffery Over a year ago

Great will give it a try now

brute_force · Accepted Answer · 2015-09-19 08:25:25Z

0

This is a perfect blog to get the answers around Parent-Child Controller Communication :

https://rclayton.silvrback.com/parent-child-controller-communication

answered Sep 19, 2015 at 8:25

brute_force

1,1717 silver badges13 bronze badges

1 Comment

PaulMcCaffery Over a year ago

I had read that article but it doesn't really answer my question. I can create a single child that sets a hard coded parent property but the parent property being set will be different for each instance of the child. That's what I am struggling with.

Collectives™ on Stack Overflow

Angular multiple nested controllers

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related