AngularJS - Transcluded scope with child scopes

Question

I have a case where I want to create a reusable directive for modular forms, where there is a main form directive that is intended to be used with some combination of field input directives. Something like this:

<form-container submit-path="/path/to/api/">
    <input-field label="Foo"></input-field>
    <select-field label="Bar"></select-field>
</form-container>

I would use an isolate scope on the form-container, and it would also need to create a transcluded scope for the fields, but I'm not sure what to use for the fields. I envision the scope hierarchy to be something like this:

- (1) form-container isolate scope
- (2) form-container transcluded scope
  - (3) input-field scope
  - (4) select-field scope

Scope (1) would have the function that collects and POSTs the data from the form, but it would need access to the data that is bound to the form elements in scopes (3) and (4).

Is this even possible?

Since the preferred way would be to store the mode in scope (2), I would need the fields to be bound to different variable names, but it doesn't seem like I can interpolate on ng-model with a directive's attribute. edit: Seems like I can do this manually in a compile function? 2nd edit: once this bug is fixed.

In addition, the form submit functionality doesn't have direct access to the data in scope (2). You could use $$nextSibling, but apparently this is bad practice.

Is there a way to get scope (3) and (4) to inherit directly from scope (1)?

Answer 1

http://plnkr.co/edit/F1e1mKA2UU3EL1M9yaJ0?p=preview

This is what I tried to achieve it with usage of directive controller and letting child directive update the value in the parent directive though its controller.

I'm upvoting this question as I'm not satisfied and want to see the better solution.

Answer 2

I have found a solution. I posted it here as an answer to a new question, since I thought my original question was worded badly.

Basically you don't need to mess with transcluded scopes. You simply use a tag and either an ng-controller on the form, or a custom directive that attaches a scope to the form tag.

To use dynamic values for ng-model in the directive, you have to use a link function to modify the instance of the directive. See the solution for all the details.