AngularJS嵌套控制器 - 表单未定义

angularjs nested controllers - form undefined

本文关键字：表单 未定义 控制器 嵌套 AngularJS      更新时间：2023-09-26

我有以下html结构：

<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>

和以下 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');  
  };  
});

基本上我需要的是通过父控制器访问checkout_form，但是，它是未定义的。有没有办法实现这一目标？

这是一个JSfiddle：http://jsfiddle.net/thm259o7/

在 Angular 中处理嵌套控制器的最佳方法是使用 Controller As Syntax https://toddmotto.com/digging-into-angulars-controller-as-syntax/

是的。像这样更改代码：

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

然后像这样更改 HTML：

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

就我而言，它有效。

相关文章：