Question

我有以下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/

Answer 1

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

Answer 2

是。像这样更改你的代码：

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

然后像这样更改HTML：

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

就我而言，它有效。

angularjs嵌套控制器 - 形式未定义

2 个答案: