在ui-router中传递参数给子状态的麻烦

我有两种状态，一种是另一种的状态。其中一个代表人物列表（people），另一个代表当您单击某个人时查看更多详细信息（people.detail）。在ui-router中传递参数给子状态的麻烦

我的第一个状态按预期工作，并有几个参数代表您可以应用的所有各种服务器端过滤器和分页。孩子状态是一个模式窗口，弹出如预期，但我唯一的参数personID从来没有把它变成$stateParams。我想知道是否可以组合REST风格的URL和查询字符串样式？

也许值得注意的是，$stateParams已填充您期望从父状态得到的所有内容。

编辑：Plunker来说明我的意思 - http://plnkr.co/edit/eNMIEt?p=info（注意，ID是不确定的）

app.js

$urlRouterProvider.otherwise('/people'); 

    $stateProvider 
     .state('people', { 
      url: '/people?pageNumber&pageSize&sortField&sortDirection&search&countryID&jobFunctionIDs&firmTypeIDs', 
      templateUrl: 'Static/js/angular/views/people-list.html', 
      controller: 'PeopleListController', 
      resolve: { 
       api: "api", 
       people: function (api, $stateParams) { 
        //Code ommitted 
       }, 
       countries: function (api) { 
        //Code ommitted 
       }, 
       jobFunctions: function (api) { 
        //Code ommitted 
       }, 
       firmTypes: function (api) { 
        //Code ommitted 
       } 
      } 

     }); 

    modalStateProvider.state('people.detail', { 
     url: "/{personID}", 
     templateUrl: 'Static/js/angular/views/people-detail.html', 
     controller: function() { 

     }, 
     resolve: { 
      person: function (api, $stateParams) { 
       return api.people.getDetail($stateParams.personID); 
      } 
     } 
    });

的modalStateProvider样子：

angular.module('myApp') 
.provider('modalState', function ($stateProvider) { 
    var provider = this; 
    this.$get = function() { 
     return provider; 
    } 
    this.state = function (stateName, options) { 
     var modalInstance; 
     $stateProvider.state(stateName, { 
      url: options.url, 
      onEnter: function ($modal, $state) { 
       modalInstance = $modal.open(options); 
       modalInstance.result['finally'](function() { 
        modalInstance = null; 
        if ($state.$current.name === stateName) { 
         $state.go('^'); 
        } 
       }); 
      }, 
      onExit: function() { 
       if (modalInstance) { 
        modalInstance.close(); 
       } 
      } 
     }); 
    }; 
})

最后我在我的控制器中的功能转换到people.detail状态：

$scope.transitionToPersonDetail = function (personID) { 
     $state.transitionTo('.detail', { personID: personID }, { location: true, inherit: true, relative: $state.$current, notify: false }); 
    };

来源

2014-12-04 sxthomson

至于我记得“决心”的值是在控制器直接可用，但我想，如果控制器为您的孩子查看所有

modalStateProvider.state('people.detail', { 
    url: "/:personID", 
    templateUrl: 'Static/js/angular/views/people-detail.html', 
    controller: function() { 
     console.log(person) 
    }, 
    resolve: { 
     person: function (api, $stateParams) { 
      return api.people.getDetail($stateParams.personID); 
     } 
    } 
});

来源

2014-12-04 11:28:48 maurycy

控制器绝对触发。如果我删除'api.people.getDetail（$ stateParams.personID）'调用（它将从web服务返回一个500，因为personID未定义），并替换为返回一个文字，然后将其记录下来。此处显示 - http://i.imgur.com/pHwe0lo.png – sxthomson 2014-12-04 11:35:16

'url：“/：personID”，'您是否尝试过ui-router params模式？ ;） – maurycy 2014-12-04 11:40:07

不幸的是，'：personID'语法与根据文档的大括号语法是可以互换的 - https://github.com/angular-ui/ui-router/wiki/URL-Routing – sxthomson 2014-12-04 11:45:59

触发了更多的检查之后，它值得检查我仍然不完全确定为什么会发生这种情况，我认为这与modalStateProvider的范围$stateParams有关，以及该州没有“准备就绪”的事实。所有这些纯粹是猜测。

我使用此代码固定它：

$stateProvider.state('people.detail', { 
     url: '/{personID:int}', 
     onEnter: ['$stateParams', '$state', '$modal', 'api', function($stateParams, $state, $modal, api) { 
      $modal.open({ 
       templateUrl: 'Static/js/angular/views/people-detail.html', 
       controller: function(person) { 
        console.log(person); 
       }, 
       resolve: { 
        person: function() { 
         return api.people.getDetail($stateParams.personID); 
        } 
       } 
      }).result['finally'](function(result) { 
       $state.transitionTo('people'); 
      }); 
     }] 
    });

来源

2014-12-04 16:58:42 sxthomson

在ui-router中传递参数给子状态的麻烦

回答

相关问题