AngularJS ui-router form submission

중첩 된 양식과 경로가있는 마법사를 만들기 위해 AngularJS + ui-router를 사용하고 있습니다. NGAngularJS ui-router form submission

.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' 
    });

각 뷰 일부 형태를 포함하여 $scope.AddItem 객체 형태 요소 값을 저장 여기

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

양식에 대한 라우팅이다 : 여기

메인 형태 - <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 : 내가에 submitForm()를 넣어 마지막 형태로 NG 클릭하고 postWizardMainController에 submitForm() 기능을 찾습니다. 이 옵션에서는 submitForm() 함수가 호출되며 비트가없는 객체 비트가 호출됩니다. $scope.AddItem은 undefined입니다.

그래서, 질문은 : 어떻게 양식을 제출하고 모든 중첩 된 형태의 데이터를 포함해야하는, 제출로 $scope.AddItem 개체를 전달할 수 있습니다. 내 생각 엔 그것은 범위에 의해 액세스 할 수없는 것입니다 때문에

출처

2016-07-07 user1935987

postWizardMainController에 $scope.AddItem = {}를 선언했다'= "SubmitForm에 (AddItem을)를"'NG 제출 어디에서'submitForm' 함수를 구현했는지 – WalksAway

나는 그렇게 생각한다. 그래, 나는 노력했다. 정의되지 않았습니다. 예, 알 수없는 이유로 액세스 할 수 없습니다. – user1935987

이 모든 것이 일부 상위 컨트롤러에 중첩되어 있습니까? – WalksAway

이 솔루션을 사용하면 기능에 addItem를 전달 해봤

출처

2016-07-07 08:52:36 user1935987

AngularJS ui-router form submission

답변

관련 문제