How Do I Access Formcontroller In Parent Controller Or Scope In Angularjs

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

Solution 1:

To deal with dynamic forms, and thus the dynamic location of the associated FormController, I used a simple directive to help locate the scope that contains the form.

Answer :

Create a directive that $emit's the scope associated w/the form:

module.directive('formLocator', function() {
    return {
      link: function(scope) {
        scope.$emit('formLocator');
      }
    }

Use the directive in the markup:

<formname="myForm"novalidateform-locator>

Listen for the event broadcast by the directive in your controller:

$scope.$on('formLocator', function(event) {
  $scope.myDeeplyNestedForm = event.targetScope.myForm;
});

Solution 2:

There a much simpler way to communicate back up in the scope hierarchy by using angular process of looking for objects up in its scope hierarchy.

This allows us to attach the object from a lower scope into a higher scope by using the dot notation.

In this case you need to create a "catcher" empty object on the top level controller. This catcher object can then be assigned the form objects from the lower scopes. Here is a plunk for demo.

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

It isn't perfectly elegant but if you think of this "catcher" object as an event listener, we're still following a standard pattern.

create an empty catcher object in the controller where you'd like a reference to the nested form

functionmainController($scope){
  $scope.catcher = {

  };
 }

Then in the markup itself whenever the ng-form directive is declared, set catcher.formName = formName like so

<ng-formname="alpha"><spanng-init="catcher.alpha = alpha"></span><inputtype="text"required=""ng-model="alphaValue" /></ng-form>

Because we're assigned to "catcher.", angular will traverse up the scope hierarchy and find thd it in the mainController regardless of any number of controllers in between (assuming they also don't have a catcher object, of course)

Solution 3:

Because I was using partial views with ng-view the forms were registered on a child scope of my controller. It seems that I cannot access the child scopes from a parent one, due to prototypical inheritance.

That said, I did manage to get the form controller instances into my controller by passing them through the function that was responsible for opening/closing the accordion.

The solution is something like this:

<ang-click="open_section('section1', section1Form)">Section 1</a><divcollapse="section1"><formname="section1Form"></form></div><ang-click="open_section('section2', section2Form)">Section 2</a><divcollapse="section2"><formname="section2Form"></form></div>

Solution 4:

In the angular documentation one can read:

<form[name="{string}"]>
</form>

Name of the form. If specified, the form controller will be published into related scope, under this name.

However, there are certain directives, like ngIf, that create a new scope:

Note that when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored.

Can that be your case? If so, you can try setting the form name to something like "forms.section1Form" and then access it accordingly in the scope.

Solution 5:

To access the form from a directive, controller, etc... you can utilize ng-init:

For example:

<formname="myForm"><divng-init="myLocalScopeVar=form"></div

    <inputname="myField"....></form>

You know can access the form data, or pass back with a bound variable if this is a directive. Example in the controller for the above template:

if ($scope.myLocalScopeVar.myField.$valid ) ...

This is similar to Sinil D's answer great answer, in that is saves the form onto the parent $scope, but it doesn't use events. It is essentially doing the same thing, but a bit less overhead.