角度ui-路由器-如何访问嵌套的、命名的视图中的参数，从父模板传递?

Hi I am trying to access a parameter in the controller "ViewWorklogCrtl" while using ui-router and running into difficulty.

你好，我正在尝试访问控制器“ViewWorklogCrtl”中的一个参数，同时使用ui-router并遇到困难。

Basically, my parent template contains:

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

a(ui-sref="instance-ticket.worklog({id:{{ticket.testnum}}})") show

and then further down the page:

再往下一页

section(ui-view="top-section")

Then in my app.js, containing client-side routing info in short I have:

在我的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'
      }
  }
  })

The template loading is working correctly, the issue and question I can't find an answer to is - how to access "testnum" being passed through the ui-sref link, to and within the ViewWorkLogCtrl... Is there a better approach to this?

模板加载工作正常，我找不到答案的问题是——如何通过ui-sref链接访问并在ViewWorkLogCtrl…有更好的办法吗?

Much thanks!!!

多谢谢! ! !

2 个解决方案

#1

103

The instanceID is declared as an parameter, so we can access it like this

instanceID被声明为一个参数，因此我们可以像这样访问它

.controller('ViewWorklogCrtl',
    [       '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        $scope.instanceID = $stateParams.instanceID;
        ...

All the other details could be found here https://github.com/angular-ui/ui-router/wiki/URL-Routing

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

And the call to ui-sref should be like this

对ui-sref的调用应该是这样的

<a ui-sref="instance-ticket.worklog({ instanceID:ticket.testnum })" >..

Extend:

扩展:

In case that we would like to get two parameters, 1) instanceID from the parent 2) testnum from the current, we have to adjust the state defintion like this

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

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

And the ui-sref

和ui-sref

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

And we can access it like this:

我们可以这样访问:

.controller('ViewWorklogCrtl',
    [       '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        console.log($stateParams.instanceID)
        console.log($stateParams.testnum)
        ...

#2

I have written a custom directive to solve this problem.

我已经写了一个自定义指令来解决这个问题。

<a my-sref="{{myStateVar}}">awesome link</a>

You can clone it from Github: https://github.com/JensEger/Angular-Directives/tree/master/ui-router-helper

您可以从Github上克隆它:https://github.com/JensEger/Angular-Directives/tree/master/ui-router-helper

#1

103