Получите параметры URL, используя $ stateParams, UI-router. Undefined Value

Question

Я передаю значение из одного состояния в другое с помощью UI-Router. В моем контроллере, когда обновляется url, я пытаюсь получить доступ ко второму параметру моего url, используя $stateParams, но по какой-то причине я могу получить доступ к первому параметру, но второй - НЕ УКАЗАН. Это мой код:

состояние 1, URL:

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

состояние 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

Вы можете не передавать параметры в URL-адресе, если нет явного требования. Я бы предпочел использовать $ stateParams в контроллере для извлечения данных. Для этого вам нужно определить параметры по умолчанию в состоянии , чтобы он работал.

$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

вы испытываете стандартное поведение UI-маршрутизатора и Parent/Child состояние Defintion:

• метрополия объявляет $ stateParams (как url: '/:token/') - так что есть только один объявлен - a token
• дочернее состояние получает все от родителя (ов), плюс объявляет новый параметр (как url: 'details/{submissionIdd}') - так оно и определено - token и submissionIdd,

Таким образом, в то время как ребенок имеет доступ к обоим Params, родительское состояние имеет только параметр маркер

состояние 1 = == РОДИТЕЛЕЙ, URL:

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

здесь мы будем иметь submissionIdd неопределенными

состояние 2 === РЕБЕНОК, URL:

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

оба там submissionIdd=PP163Ku3dOR и token=5nqeAPqlv21

Extend - there is a working plunker

Это утверждает определение (в plunker немного корректируется)

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

будет надлежащим образом sh OW состояния Титулы этих связей

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'})"> 

Проверить это here