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

Question

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

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:

 $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?

Much thanks!!!

It would be simpler to it the way you suggest, it's begin to be complicated — Gino, Mar 12 '17 at 17:29

Radim Köhler · Accepted Answer · 2014-01-13T18:25:52.660

105

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

.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

And the call to ui-sref should be like this

<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

.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

<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)
        ...

edited Jan 13 '14 at 18:25

answered Jan 13 '14 at 17:43

Radim Köhler

122,561
47
239
335

1

Thanks for your response. Unfortunately, grabbing the instanceID is clear, but the value I need to retrieve at the worklog level is "testnum" in my example. When this gets clicked: a(ui-sref="instance-ticket.worklog({id:{{ticket.testnum}}})") It is loading the partial into the named view, I need to retrieve that "id" value which is currently populated as testnum... – hzane Jan 13 '14 at 17:49
I've updated the answer, with new version of `the ui-sref` call. We have to use the same parameter name *instanceID* as declared in url, and I expect that the `ticket` is a item of some ng-repeat... this is the way I do declare the state href/references. the testunm of the ticket would be evaluated and passed as instanceID into the `$stateParams` – Radim Köhler Jan 13 '14 at 17:57
While not sure, if you've got it working... so I extended the answer, with other approach. We can introduce a new parameter `testnum`. Here both parent and child states declares params... we can pass them in a single call... and access them via `$stateParams` – Radim Köhler Jan 13 '14 at 18:28
I think that will do it! I think I had two problems, not fully understanding how stateParams work, and erroneously trying to put my url property in the view. Your answer has greatly helped me clear up both of these problems. Now it seems I should be able to toggle the "testnum" (:worklogID) property, since in reality there will be a list of those links. thanks! – hzane Jan 13 '14 at 18:44

score 4 · Answer 2 · edited Jun 19 '15 at 10:20

4

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

edited Jun 19 '15 at 10:20

fracz

20,536
18
103
149

answered Apr 11 '14 at 09:00

Jens Eger

118
1
6

You read my thoughts! Like a boss!! Thanks man! Maybe not the best answer for the question, but it's just was i was looking for. – Crisboot Dec 15 '15 at 18:17

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

2 Answers2

Linked