Angular ui-router - 如何访问从父模板传递的嵌套命名视图中的参数?

hza*_*ane 59 javascript nested angularjs angular-ui-router

嗨我正在尝试访问控制器"ViewWorklogCrtl"中的参数,同时使用ui-router并遇到困难.

基本上,我的父模板包含:

a(ui-sref="instance-ticket.worklog({id:{{ticket.testnum}}})") show
Run Code Online (Sandbox Code Playgroud)

然后进一步向下:

section(ui-view="top-section")
Run Code Online (Sandbox Code Playgroud)

然后在我的app.js中,包含客户端路由信息,我有:

 $stateProvider
.state('instance-ticket', {
  url: '/ticket/:instanceID',
  templateUrl: 'partials/instance-ticket',
  controller: 'ViewTicketCrtl'
})
.state('instance-ticket.worklog', {
  views:{
    'top-section':{
      templateUrl:'/partials/ticket.worklog.jade',
      controller: 'ViewWorklogCrtl'
      }
  }
  })
Run Code Online (Sandbox Code Playgroud)

模板加载工作正常,我无法找到答案的问题和问题是 - 如何通过ui-sref链接访问"testnum",以及ViewWorkLogCtrl内部...是否有更好的方法这个?

非常感谢!!!

Rad*_*ler 105

instanceID声明为参数,所以我们可以这样访问

.controller('ViewWorklogCrtl',
    [       '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        $scope.instanceID = $stateParams.instanceID;
        ...
Run Code Online (Sandbox Code Playgroud)

所有其他细节可以在这里找到https://github.com/angular-ui/ui-router/wiki/URL-Routing

呼叫ui-sref应该是这样的

<a ui-sref="instance-ticket.worklog({ instanceID:ticket.testnum })" >..
Run Code Online (Sandbox Code Playgroud)

延伸:

如果我们想获得两个参数,1)来自父2)的instanceID来自当前的testnum,我们必须像这样调整状态定义

.state('instance-ticket', {
  url: '/ticket/:instanceID',      // instanceID
  templateUrl: 'partials/instance-ticket',
  controller: 'ViewTicketCrtl'
})
.state('instance-ticket.worklog', {
  // new param defintion
  url: '/worklog/:testnum',         // testnum
  views:{
    'top-section':{
      templateUrl:'/partials/ticket.worklog.jade',
      controller: 'ViewWorklogCrtl'
      }
  }
Run Code Online (Sandbox Code Playgroud)

而且 ui-sref

<a ui-sref="instance-ticket.worklog({ instanceID:1, ticket.testnum:2 })" >..
Run Code Online (Sandbox Code Playgroud)

我们可以像这样访问它:

.controller('ViewWorklogCrtl',
    [       '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        console.log($stateParams.instanceID)
        console.log($stateParams.testnum)
        ...
Run Code Online (Sandbox Code Playgroud)