Jonathan Grupp Jonathan Grupp - 5 months ago 66
AngularJS Question

angular ui-router: get $state info of toState in resolve

Update: this should be possible in angular-ui-router as of

. See the release notes and the issue I created.

I would like to access the state's name and other attributes the app is navigating to using angular ui-router when working on the resolve.

The reason: I want load some user data (including their access rights) asynchronously before allowing the app the enter that page.

Currently this is not possible because injecting $state into the resolve points to the state you're navigating away form, not to the one you're navigating to.

I know I can:

  • get the toState somewhere else with $rootScope('$stateChangeStart') and save it in my settings service for instance. But I think it's a little messy.

  • hard code the state into the resolve, but I don't want to reuse my resolve for all pages

I also created an issue on the ui-router github (Please + 1 if you are interested!):

Here's my code so far. Any help appreciated!

.config(function($stateProvider) {

$stateProvider.state('somePage', {
// ..
resolve: {
userData: function($stateParams, $state, Settings) {
return Settings.getUserData() // load user data asynchronously
.then(function (userData) {
// Problem: $state still points to the state you're navigating away from


You can always decorate $state with next and toParams properties:

angular.config(function($provide) {
  $provide.decorator('$state', function($delegate, $rootScope) {
    $rootScope.$on('$stateChangeStart', function(event, state, params) {
      $ = state;
      $delegate.toParams = params;
    return $delegate;

And use as such:

.state('myState', {
    url: '/something/{id}',
    resolve: {
        oneThing: function($state) {
            console.log($state.toParams, $;