Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I access FormController in parent controller or scope in AngularJS
    text
    copied!<p>I have a page with multiple forms and I only want to show one at a time. For this I separated each form into a section and using Bootstrap's accordion plugin I only allow one open section at a time. </p> <p>My markup looks something like this:</p> <pre><code>&lt;a ng-click="open_section('section1')"&gt;Section 1&lt;/a&gt; &lt;div collapse="section1"&gt; &lt;form name="section1Form"&gt; &lt;/form&gt; &lt;/div&gt; &lt;a ng-click="open_section('section2')"&gt;Section 2&lt;/a&gt; &lt;div collapse="section2"&gt; &lt;form name="section2Form"&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p>Everything work just fine, I can navigate between the forms etc.</p> <p>Because I don't want the user opening a section if the one they are currently editing contains validation errors, I tried checking in the <code>open_section</code> function if the form associated with it is valid or not. </p> <p>I tried, but I could not. I could not access the FormController associated with the forms in the controller that is responsible for the page. For some reason, they are not getting published on the scope.</p> <p>This is what I tried:</p> <ul> <li><p><code>$scope.section1Form</code> is <code>undefined</code></p></li> <li><p>tried with <code>$scope.$watch('section1Form, function(){})</code>, still undefined</p></li> <li><p>tried adding the name of the form as a second parameter to <code>open_section</code> like so: <code>open_section('section1', section1Form)</code> but in the function the second argument is <code>undefined</code>.</p></li> </ul> <p>Between the <code>&lt;form&gt;&lt;/form&gt;</code> tags, I have access to the FormController, but outside them I don't. Since the event is coming from outside the <code>&lt;form&gt;</code> (the closing, opening of the sections) I can't pass the FormController to my controller to check the validity of my forms.</p> <p>Is there a way to get around this, or should I refactor my page?</p> <p>I am using Angular 1.1.5 btw.</p> <p>Also, checking with the AngularJS Batarang Chrome plugin, I can see that the forms get published as child scopes to the current scope. </p> <p><strong>EDIT</strong>: this is how the scope hierarchy looks for this app</p> <pre><code> - root | ---current controller\'s scope | ----scope that contains the forms </code></pre> <p>Is this because I'm using <code>ng-include</code>? Is there no way to access those forms in a controller then?</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