Passing state params when navigating to a state by URL routing in angular ui-router

Question

Below is a sample state hierarchy,

.state('home', {
  url: '/home',
  templateUrl: 'views/home.html',
  controller: 'HomeCtrl'
})
.state('home.books', {
  url: '/:collectionId',
  abstract: true,
  controller: 'BooksCtrl'
})
.state('home.books.displaybooks', {
  url: '^/books',
  templateUrl: 'views/displaybooks.html',
  controller: 'DisplayBookCtrl'
})

In home.books.displaybooks state, I display the collection of books.

I can access this state by two means,

By clicking on the link in "home" state. I use ui-sref and pass the default collection id for the user. No problems here
By URL routing http://localhost/books (please note the ^ in url in state definition. I want absolute url without displaying the collectionId in the address bar). Here the problem is that the state does not get the collectionId parameter. So can some please point how I can insert the default collectionId of the user when I am navigating to the state through URL routing.

Thanks,

Please see below answer for approval if it is useful.

cerd
– cerd

2016-09-22 14:44:52 +00:00
Commented Sep 22, 2016 at 14:44 — cerd
– cerd, Commented Sep 22, 2016 at 14:44

cerd · Accepted Answer · 2015-01-28 07:44:18Z

Per the UI Router docs

In state controllers, the $stateParams object will only contain the params that were registered with that state. So you will not see params registered on other states, including ancestors.

The work around is to use resolve in the parent route, then inject the resolved value into the child state/controller:

$stateProvider
.state('home', {
  url: '/home',
  templateUrl: 'views/home.html',
  controller: 'HomeCtrl'
})
.state('home.books', {
  url: '/:collectionId',
  abstract: true,
  controller: 'BooksCtrl',
  resolve:{
      collectionId: ['$stateParams', function($stateParams){
          return $stateParams.collectionId;
      }]
  }
})
.state('home.books.displaybooks', {
  url: '^/books',
  templateUrl: 'views/displaybooks.html',
  // controller: 'DisplayBookCtrl' // this just needs collectionId now
  controller: function($stateParams, collectionId){
       console.log(collectionId);
  }
});

Collectives™ on Stack Overflow

Passing state params when navigating to a state by URL routing in angular ui-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related