Erhalte Params von URL mit $ stateParams, UI-Router. Undefinierter Wert

Question

Ich übergebe einen Wert von einem Zustand zu einem anderen mit UI-Router. In meinem Controller, wenn die URL aktualisiert wird, versuche ich Zugriff auf den zweiten Parameter meiner URL mit $stateParams, aber aus irgendeinem Grund kann ich Zugriff auf den ersten Parameter, aber die zweite ist UNDEFINED. Dies ist mein Code:

Zustand 1 URL:

http://localhost:16009/#/5nqeAPqlv21/ 

Zustand 2 URL:

http://localhost:16009/#/5nqeAPqlv21/details/PP163Ku3dOR 

candidateContoller.js:

//go to state 2 (same controller for parent and child views) 
$state.go('index.details', { "submissionIdd": publicSubmissionId }); 

//when located in the new state and new url: 
console.log($stateParams.submissionIdd); //shows undefined 
console.log($stateParams.token); //shows 5nqeAPqlv21 

App.js:

$stateProvider  
    .state('index', 
     { 
      url: '/:token/', 
      views: { 
       '': { 
        templateUrl: 'AngularJS/Templates/indexView.html', 
        controller: 'candidateController as candCtrl' 
       }, 
       'sectioncandidate@index': { 
        templateUrl: (_isNotMobile) 
         ? 'AngularJS/Templates/candidatesView.html' 
         : 'AngularJS/Templates/candidatesMobileView.html' 
       } 
      } 

     })   

    .state('index.details', { 
     url: 'details/{submissionIdd}', 
     views: { 
      'sectioncandidate@index': { 
       templateUrl: (_isNotMobile) 
        ? 'AngularJS/Templates/candidateView.html' 
        : 'AngularJS/Templates/candidateMobileView.html' 
      } 
     } 
    }) 

Answer 1

Sie können es vorziehen, die Parameter in der URL nicht zu übergeben, es sei denn, es gibt eine explizite Anforderung. Ich würde lieber $ stateParams im Controller verwenden, um die Daten zu holen. Dazu müssen Sie die Standardparameter im Zustand definieren, damit es funktioniert.

$stateProvider .state('index.details', { 
     url: 'details', 
      params: { 
       submissionIdd: 'default', 
      }, 
     views: { 
      'sectioncandidate@index': { 
       templateUrl: (_isNotMobile) ? 'AngularJS/Templates/candidateView.html' : 'AngularJS/Templates/candidateMobileView.html' , 
      controller: function($stateParams){ 
         console.log($stateParams.submissionIdd) 
        } 
      } 
     } 
    }) 

Answer 2

Sie tun Erfahrung Standardverhalten des UI-Router und Eltern-/Kind- Zustand Defintion:

• Mutter Zustand erklärt $ stateParams (als url: '/:token/') - so gibt es nur eine erklärt - token
• untergeordneter Status ruft alle von übergeordneten Elementen ab und deklariert einen neuen Parameter (wie url: 'details/{submissionIdd}') - so hat es beide definiert - token und submissionIdd,

So, während Kind Zugang zu beiden params hat, Mutter Zustand

Zustand 1 = nur ein Token Parameter hat == ELTERN, URL:

http://localhost:16009/#/5nqeAPqlv21/ 

hier haben wir submissionIdd undefined

Zustand 2 === CHILD, URL:

http://localhost:16009/#/5nqeAPqlv21/details/PP163Ku3dOR 

beide dort submissionIdd=PP163Ku3dOR und token=5nqeAPqlv21

Extend - there is a working plunker

Diese Definition Zustände (im Plunker ein Bit eingestellt)

.state('index', 
    { 
     url: '/:token/', 
     views: { 
      '': { 
       templateUrl: 'indexView.html', 
       controller: 'candidateController as candCtrl' 
      }, 
      'sectioncandidate@index': { 
       templateUrl: 'parent.html' 
      } 
     } 

    })   

.state('index.details', { 
    url: 'details/{submissionIdd}', 
    views: { 
     'sectioncandidate@index': { 
      templateUrl:'child.html', 
     } 
    }) 

wird richtig sh ow Zustand params für diese Links

href 
<a href="#/5nqeAPqlv21/"> 
<a href="#/5nqeAPqlv21/details/PP163Ku3dOR"> 
<a href="#/5nqeAPqlv21/details/other"> 
ui-sref 
<a ui-sref="index({token: '5nqeAPqlv21'})"> 
<a ui-sref="index.details({token: '5nqeAPqlv21', submissionIdd: 'another'})"> 

Check it here