angularjs嵌套控制器-形式未定义
[英]angularjs nested controllers - form undefined
问题描述
I have the following html structure: 
我有以下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>
and the following js: 和以下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. 基本上，我需要通过父控制器访问checkout_form，但是它是未定义的。 Is there a way to achieve that? 有办法实现吗？
Here's a JSfiddle: http://jsfiddle.net/thm259o7/ 这是一个JSfiddle： http : //jsfiddle.net/thm259o7/
2 个解决方案
解决方案1
0 2016-02-23 13:34:04
在Angular中处理嵌套控制器的最佳方法是使用Controller As Syntax（控制器作为语法） https://toddmotto.com/digging-into-angulars-controller-as-syntax/
解决方案2
0 2018-03-13 17:22:27
Yes. 是。 Change your code like this: 像这样更改代码：
myApp.controller('abroadCourseController', function ($scope) {
$scope.form.checkout_form = {}
And then change the HTML like this: 然后像这样更改HTML：
<form name="form.checkout_form" ...>
In my case, It works. 就我而言，它有效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.