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
– Gino, Commented Mar 12, 2017 at 17:29

Radim Köhler · Accepted Answer · 2014-01-13 18:25:52Z

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, 2014 at 18:25

answered Jan 13, 2014 at 17:43

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hzane Over a year ago

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

Radim Köhler Over a year ago

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 Over a year ago

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

hzane Over a year ago

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!

fracz · Accepted Answer · 2015-06-19 10:20:20Z

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, 2015 at 10:20

$fracz's user avatar$

fracz

21.3k18 gold badges109 silver badges154 bronze badges

answered Apr 11, 2014 at 9:00

Jens Eger

1181 silver badge6 bronze badges

1 Comment

Crisboot Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Linked

Related