Angular multiple nested controllers

Question

I have something that seems like a common problem, but I can not find anything on the Internet on how to achieve what I'm trying to do.

I have a search form containing several instances of a regular controller, which I use to execute queries like head / autocomplete when I type. Each controller is configured with a different parameter for searching by different criteria. Search results must be linked to the parent property to perform a search based on the entered criteria. For example:

SearchController

CleanerId
TeacherId
StudentId

And the child controller simply has the concept of a control with an identifier and a Text value, where the identifier must be assigned to the corresponding parent property.

Ideally, I want to associate the hidden ID field of each controller with the ID of the child model and another property of the parent, as shown below, but I do not think this is 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 must be shared, so how can I associate the parent controller with child identifiers?

Any help is greatly appreciated.

Answer 1

, .

:

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

:

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

Answer 2

, :

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