angularjs nested controllers - form undefined

Question

I have the following html structure:

<body ng-controller="checkoutController">
    <div class="main clearfix" ng-controller="abroadCourseController">
        //html useless information
        <form name="checkout_form" ng-submit="submitForm()" novalidate>
            <div validate-section="checkoutInfo" ng-show="stepOne">
                //fields
                <div class="confirmationBox">
                    <button type="button" ng-click="displayPaymentMethods()">SHOW PAYMENT METHODS</button>
                </div>
            </div>
            <div validate-section="paymentAbroadCourseB2C" ng-show="stepTwo" >
                //fields
                <div class="confirmationBox">
                    <button type="button" ng-click="submitForm()">FINISH</button>
                </div>
            </div>
        </form>
    </div>
</body>

and the following js:

var myApp = angular.module('myApp',[]);
myApp.controller('checkoutController', function ($scope) {
  $scope.submitForm = function(){
     $scope.stepOne = true;
     $scope.stepTwo = false;

     alert($scope.checkout_form);
     alert('oi');  
  };  
});

myApp.controller('abroadCourseController', function ($scope) {
  $scope.stepOne = true;
  $scope.stepTwo = false;

  $scope.displayPaymentMethods = function(){
     $scope.stepOne = false;
     $scope.stepTwo = true;

     alert($scope.checkout_form);
     alert('oi');  
  };  
});

basically what I need is to have access on checkout_form through the parent controller, however, it's undefined. Is there a way to achieve that?

Here's a JSfiddle: http://jsfiddle.net/thm259o7/

you said it is undefined on the parent controller - what about the child controller? is it undefined there too? PS don't use alert as it freezes the thread and causes lots of problems in angular, use console.log instead. in fact using alert may be your problem — danday74, Feb 23 '16 at 13:12
@danday74 in the child controller it has value. You can check on js fiddle — Thiago Custodio, Feb 23 '16 at 13:19
ok thanks for clarifying that - please remove use of alert and let me know what happens - send output to the text in a div or something — danday74, Feb 23 '16 at 13:19
@RajatBhadauria in the parent controller? or in the child one? — Thiago Custodio, Feb 23 '16 at 13:20
in the parent it is undefined, in the nested child it is set — danday74, Feb 23 '16 at 13:21
If `checkoutController` needs access to `checkout_form`, then why is the form defined for `abroadCourseController`? — a better oliver, Feb 23 '16 at 13:29
@zeroflagL both use the form. this question is a mock of my real problem. — Thiago Custodio, Feb 23 '16 at 13:44
It doesn't matter if both use the form or not. If something is not declared in the scope of a controller (or maybe its parent controller) then it's not the controller's business. You have an architectural problem, not so much a technical one. — a better oliver, Feb 23 '16 at 13:58
just define $rootScope in parent Controller or child Controller you can access the $rootScope in any controller .. — Rajat Bhadauria, Feb 23 '16 at 14:39
you can use the following link for that http://stackoverflow.com/questions/18880737/how-do-i-use-rootscope-in-angular-to-store-variables — Rajat Bhadauria, Feb 23 '16 at 14:40

score 0 · Answer 1 · answered Feb 23 '16 at 13:34

0

The best way to deal with nested controllers in Angular is using the Controller As Syntax https://toddmotto.com/digging-into-angulars-controller-as-syntax/

answered Feb 23 '16 at 13:34

Gabriel Matusevich

3,835
10
39
58

score 0 · Answer 2 · answered Mar 13 '18 at 17:22

0

Yes. Change your code like this:

myApp.controller('abroadCourseController', function ($scope) {
    $scope.form.checkout_form = {}

And then change the HTML like this:

<form name="form.checkout_form" ...>

In my case, It works.

answered Mar 13 '18 at 17:22

Roham Rafii

2,929
7
35
49

angularjs nested controllers - form undefined

2 Answers2