Question

我使用UI-Router将值从一个状态传递到另一个状态。在我的控制器更新网址时，我正在尝试使用$stateParams访问我的网址的第二个参数，但由于某种原因，我可以访问第一个参数，但第二个参数是 UNDEFINED < / em>的。这是我的代码：

州1，网址：

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

州2，网址：

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

您确实遇到了UI-Router和父/子状态定义的标准行为：

父状态声明$ stateParams（为url: '/:token/'） - 因此只有一个声明 - token
子状态从父项获取所有内容，并声明新参数（如 url: 'details/{submissionIdd}' ） - 因此它已定义 - token 和 submissionIdd ，

因此，虽然孩子可以访问这两个参数，但父状态只有一个标记参数

州1 ===父母，网址：

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

这里我们将submissionIdd未定义

州2 ===儿童，网址：

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

都有submissionIdd=PP163Ku3dOR和token=5nqeAPqlv21

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

将正确显示这些链接的状态参数

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

Answer 2

除非有明确的要求，否则您不希望传递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)
                   }
             }
         }
     })

使用$ stateParams，UI-router从URL获取params。未定义的价值

2 个答案: