Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS - Transcluded scope with child scopes
    text
    copied!<p>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:</p> <pre><code>&lt;form-container submit-path="/path/to/api/"&gt; &lt;input-field label="Foo"&gt;&lt;/input-field&gt; &lt;select-field label="Bar"&gt;&lt;/select-field&gt; &lt;/form-container&gt; </code></pre> <p>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:</p> <pre><code>- (1) form-container isolate scope - (2) form-container transcluded scope - (3) input-field scope - (4) select-field scope </code></pre> <p>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).</p> <p>Is this even possible? </p> <p>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, <strike>but it doesn't seem like I can interpolate on ng-model with a directive's attribute.</strike> <strong>edit:</strong> Seems like I can do this manually in a compile function? <strong>2nd edit:</strong> once <a href="https://github.com/angular/angular.js/issues/1367" rel="nofollow noreferrer">this bug</a> is fixed.</p> <p>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 <a href="https://stackoverflow.com/a/16868935/439500">bad practice.</a></p> <p>Is there a way to get scope (3) and (4) to inherit directly from scope (1)?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload