Eğik ui yönlendirici, Çoklu Adım Form doğrulama ve UI yönlendirici kullanıyorum

Question

REFRESH, Şimdi ben main_requisition.html koymak Tek bir forma sahiptir

state('app.requistion', { 
     url: "/requisition", 
     templateUrl: 'order/customer-skills/tmpl/main_requisition.html', 
     title: 'Requisition', 
     abstract: true, 
     resolve: loadSequence('ngTable', 'ngMap'), 
     controller:'MainRequisitionCtrl', 
     controllerAs:'mainReq', 
     data: { 
      module:'requisition' 
     }, 
     ncyBreadcrumb: { 
      label: 'Requisition' 
     } 
    }).state('app.requistion.create', { 
     url: "/createRequisition", 
     templateUrl: 'order/customer-skills/tmpl/customer_skills.html', 
     title: 'Create Requisition', 
     controller: 'CustSkillCtrl', 
     controllerAs: 'custSkill', 
     resolve: { 
      jobTitles: function (CustSkillService) { 
       return CustSkillService.fetchAllJobTitles(); 
      } 
     }, 
     ncyBreadcrumb: { 
      label: 'Create Requisition' 
     } 
    }).state('app.requistion.worklocation', { 
     url: "/createRequisition/workLocations", 
     templateUrl: 'order/work-locations/tmpl/workLocations.html', 
     title: 'Select Work Locations', 
     controller: 'WorkLocationCtrl', 
     controllerAs: 'workLocation', 
     resolve: { 
      workLocations : function (WorkLocationService) { 
       return WorkLocationService.fetchAllWorkLocations(); 
      } 
     }, 
     ncyBreadcrumb: { 
      label: 'Select Work Locations' 
     } 
    }) 

ve sihirbaz bağlantısını tıklayarak üzerinde anlık lütfen aşağıya bakın üstte u formu geçerli olup olmadığını

<form name="mainReq.Form" id="form" novalidate> 
     <div id="wizard" class="swMain"> 
      <!-- start: WIZARD SEPS --> 
      <ul> 
       <li ng-click="mainReq.form.goTo(mainReq.Form, 1)"> 
        <a ui-sref="app.requistion.create" ng-class="{'selected' : mainReq.currentStep >= 1, 'done' : mainReq.currentStep > 1}"> 
         <div class="stepNumber"> 
          1 
         </div> 
         <span class="stepDesc text-small"> 
         Order Dates + Customer Skills </span> 
        </a> 
       </li> 
       <li ng-click="mainReq.form.goTo(mainReq.Form, 2)"> 
        <a ui-sref="app.requistion.worklocation" ng-class="{'selected' : mainReq.currentStep >= 2, 'done' : mainReq.currentStep > 2}"> 
         <div class="stepNumber"> 
          2 
         </div> 
         <span class="stepDesc text-small"> Select Work Locations </span> 
        </a> 
       </li> 
       ............................... 

      </ul> 
      <!-- end: WIZARD SEPS --> 
      <div ui-view class="fade-in-up"></div> 
     </div> 
    </form> 

Şimdi u sadece 2. adıma 1. adımdan itibaren taşıyabilirsiniz ... başka bir sayfadan diğerine gidin. Ben ... bunu böyle hayata

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, 
          fromState, fromParams) { 
         ................ 
//here canGoToStep is false if form is invalid   
if(!canGoToStep) { 

    event.preventDefault(); 
} 

Şimdi problem canGoToStep yanlıştır ve preventDefault olarak

1. ben boş almak ..... ben diyelim ki ADIM 2 adım sayfayı yenilediğinizde geliyor() tarafından tetiklendi.
2. ben sayfa 2 worklocation ile yeniden görebilirsiniz işareti kaldırın ama adım1 hala geçersizse

3. aşağıdaki $ log.debug (fromState), $ log.debug (tostate) yazdırmak

; ve $ log.debug ($ state.current). Ben Gösterge Çıkışı

Nesne {isim: "", url: "^", görünümler: null, soyut: true}

Nesne {url: "sonra alacağınız/createRequisition/workLocations", templateUrl: "düzen/iş -locations/tmpl/workLocations.html ", title:" Çalışma Konumlarını Seç ", denetleyici:" WorkLocationCtrl ", controllerAs:" workLocation "…}

Object {name:" ", url:"^", views: null, soyut: true} mevcut durumu nu olur neden REFRESH ve işlemek için doğru bir yaklaşım nedir

ll?

Answer 1

Geçerli durum, olayının içeriğiyle geçersiz olduğundan, gezinmeye çalıştığınız durumu döndürür. Sayfayı yenilediğinizde, önceki bir durum yoktur. Geçerli durumun boş olup olmadığını (yani ilk yük olduğunu) kontrol etmenizi ve formlardan hangisinin geçerli olduğunu kontrol etmenizi ve bunlardan ilkine geçmenizi öneririm. Veya varsayılan olarak bunlara ilk olarak gidin. Böyle bir şey:

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, 
           fromState, fromParams) { 
          ................ 
    if(fromState.name == ''){ 
     event.preventDefault(); 
     //go to first valid state or go to first state in the list 
    } 
}