Angular ui-router - how to access parameters in a nested named view passed from a parent template?

Question

Hey. I am trying to access a parameter in the controller "ViewWorklogCrtl" when using ui-router and get confused.

Basically, my parent template contains:

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

and then further down:

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

Then in my app.js application containing client-side routing information, I:

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

Downloading the template works correctly, the problem and the question I can’t find the answer to is how to access the "testnum" passing through the ui-sref link to and inside ViewWorkLogCtrl ... Is there a better approach to this?

Thank you very much!!!

Answer 1

instanceID declared as a parameter, so we can access it as follows

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

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

And the ui-sref should look like this:

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

Expansion:

In case we want to get two parameters: 1) instanceID from the parent 2) testnum from the current, we must adjust the state, as shown

 .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 ui-sref

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

And we can access it as follows:

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

Answer 2

I wrote a special 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