AngularJS ui-router form submission

Question

AngularJS + ui-routerを使用して、ネストされたフォームとルートを持つウィザードを作成しています。ここで

は、メインフォームである：ここで

<div id="form-container-wizard"> 
     <div class="form-horizontal" role="form"> 
      <form name="addItem_form" ng-submit="submitForm()"> 


       <div class="page-header text-center"> 
        <h2>Post Your Item</h2> 

        <!-- the links to our nested states using relative paths --> 
        <!-- add the active class if the state matches our ui-sref --> 
        <div id="status-buttons-wizard" class="text-center"> 
         <a ng-class="{ disabled: ItemCheckPass }" ui-sref-active="active" ui-sref=".item"> <span></span>Item</a> 
         <a ng-class="{ disabled: !ItemCheckPass || LocationCheckPass}" ui-sref-active="active" ui-sref=".location"><span></span>Location</a> 
         <a ng-class="{ disabled: !ItemCheckPass || !LocationCheckPass || AccountCheckPass}"ng-show="!IsAuthenticated" ui-sref-active="active" ui-sref=".account"><span></span>Account</a> 
         <a ng-class="{ disabled: !ItemCheckPass || !LocationCheckPass || !IsAuthenticated && !AccountCheckPass }"ui-sref-active="active" ui-sref=".social"><span></span>Social</a> 
        </div> 
       </div> 

       <div class="panel panel-default"> 
        <div id="form-views" ui-view></div> 
       </div> 

      </form> 
     </div> 
    </div> <!-- wizard container --> 

フォームのルーティングである：

.state('post_add', { 
     url: '/post_add', 
     templateUrl: '/view/post_wizard/form.html', 
     controller: 'postWizardMainController', 
     abstract:true 
    }) 
    .state('post_add.item', { 
     url: '', 
     templateUrl: '/view/post_wizard/form-item.html', 
     controller: 'postWizardController' 
    }) 
    .state('post_add.location', { 
     url: '/location', 
     templateUrl: '/view/post_wizard/form-location.html', 
     controller: 'postWizardController' 
    }) 
    .state('post_add.account', { 
     url: '/account', 
     templateUrl: '/view/post_wizard/form-account.html', 
     controller: 'postWizardController' 
    }) 
    .state('post_add.social', { 
     url: '/social', 
     templateUrl: '/view/post_wizard/form-social.html', 
     controller: 'postWizardController' 
    }); 

各ビューは、部分フォームを含み、NGを使用して$scope.AddItemオブジェクトにフォーム要素の値を格納します検証変数とメソッドを保持するために使用される<input type="email" class="form-control" name="email" ng-model="AddItem.email" ng-minlength=3 ng-maxlength=30 required>

postWizardMainControllerのようなモデル。

ので、問題がある：

オプション1：コードはここにリストされているように、<form name="addItem_form" ng-submit="submitForm()">は、フォームビューの最後に位置<input type="submit" ng-disabled="addItem_form.$invalid" class="btn btn-orange" value="Post An Ad">から提出された取得されていません。

オプション2：私は最後の形式で、かつpostWizardMainControllerでsubmitForm()機能を見つけてクリックしますNGにsubmitForm()を置きます。このオプションでは、submitForm()関数が呼び出され、オブジェクトにビットが渡されません。 $scope.AddItemはundefinedです。

ので、質問です： にはどうすればフォームを送信し、すべてのネストされたフォームからのデータが含まれている必要があり、提出に$scope.AddItemオブジェクトを渡すことができます。私の推測では、それがスコープからアクセス可能ではないということですので、

Answer 1

ソリューションはpostWizardMainController