angular UI router | $stateParams not working

Question

seems like $stateParams is not working. passing date like this:

$state.go('state2', { someParam : 'broken magic' });

params being ignored on the target state

console.log('state2 params:', $stateParams); // return empty object {}

code:

    var app = angular.module('app', [
     'ui.router'
    ]);

    app.config(function($stateProvider) {
      $stateProvider
            .state('state1', {
                url: '',
                templateUrl: 'state-1.html',
                controller : function ($scope, $state, $stateParams) {
                  $scope.go = function () {
                    $state.go('state2', { someParam : 'broken magic' });
                  };

                  console.log('state1 params:', $stateParams);
                }
            })
            .state('state2', {
                url: 'state2',
                templateUrl: 'state-2.html',
                controller : function ($scope, $state, $stateParams) {
                  $scope.go = function () {
                    $state.go('state1', { someOtherParam : 'lazy lizard' });
                  };

                  console.log('state2 params:', $stateParams);
                }
            });
    });

Live example can be found here

thank you.

How did you define your states? (Show us the $stateProvider part). — kba
– kba, Commented Mar 24, 2014 at 13:41

kba · Accepted Answer · 2014-03-24 13:43:56Z

63

You can't pass arbitrary parameters between states, you need to have them defined as part of your $stateProvider definition. E.g.

$stateProvider
    .state('contacts.detail', {
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            console.log($stateParams);
        }
    }) ...

The above will output an object with the contactId property defined. If you go to /contacts/42, your $stateParams will be {contactId: 42}.

See the documentation for UI-Router URL Routing for more information.

answered Mar 24, 2014 at 13:43

kba

19.5k6 gold badges65 silver badges90 bronze badges

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

5 Comments

kba Over a year ago

@nilskp Yes, that sucks, but you should rarely need it anyway; all your data should belong in your services/factories/providers. In AngularJS 2.0, I think they'll make arbitrary parameter passing possible.

nilskp Over a year ago

I don't know. I prefer parameter passing over global state.

tamasf Over a year ago

I just encountered this issue too and it seems to be an arbitrary restriction in ui-router: bit.ly/1qbkhRq

kba Over a year ago

@nilskp I'm not saying you shouldn't use parameter passing. I'm saying when you do, it should be registered in the route. Going to a specific page with an ID? Add it to the url. Going to show an error message? Don't put it in the url—you don't want people linking to it anyway.

nilskp Over a year ago

I'd like to pass actual state, not just a text string. Kinda hard to do in a URL.

Community · Accepted Answer · 2017-05-23 12:02:29Z

54

+100

if you don't want to define your parameter in the url, you must include a params property on the state you are transitioning to. Otherwise the data will be removed from the $stateParams object. The format of the params object is an array of strings in older versions of angular-ui-router; in newer versions it is an object of empty objects:

params: { id: {}, blue: {}}

See this example:

$stateProvider.state('state1', {
    url: '',
    params: {
        id: 0,
        blue: ''
    },
    templateUrl: 'state-1.html',
    controller: function($scope, $state, $stateParams) {
        $scope.go = function() {
            $state.go('state2', {
                id: 5,
                blue: '#0000FF'
            });
        };

        console.log('state params:', $stateParams);
    }
});

Related question: Parameters for states without URLs in ui-router for AngularJS

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered May 31, 2014 at 11:01

hmd.ai

1,17111 silver badges13 bronze badges

7 Comments

Levi Lindsey Over a year ago

This was exactly what I needed--hidden parameters that are not displayed in the URL. I have been searching for a couple of days now, and have not been able to find this in the UI-Router docs. Thank you so much!

Nmzzz Over a year ago

angular-ui.github.io/ui-router/site/#/api/…

ivarni Over a year ago

NOTE: (on v0.2.10) If the state is a child state of a parent that has a URL parameter, then that parameter needs to be included in the params array.

eloone Over a year ago

This syntax will not work for newer versions. You need to declare it like this now params: { someParam: {} }. Source : stackoverflow.com/questions/22814554/… The documentation still states it should be an array which is wrong and very confusing.

colllin Over a year ago

FYI The empty objects blue: {} you're passing are treated as the default values. So pass blue: null instead if you're doing something like if ($stateParams.blue) ... in your controller.

|

Nick · Accepted Answer · 2015-01-15 22:14:49Z

Just passing parameters to a state is not enough. You have to define the parameter explicitly by name in the url property of your state.

If you don't do this, ui-router won't know this state is expecting a parameter and the $stateParams object will not be populated like you want.

Here is an example of how you might modify your state to expect a parameter, inject $stateParams, and do something with said parameter:

$stateProvider.state('state1', {
        url: '',
        templateUrl: 'state-1.html',
        controller : function ($scope, $state, $stateParams) {
          $scope.params = $stateParams;
          $scope.go = function () {
            $state.go('state2', { id : 'broken magic' });
          };

          console.log('state1 params:', $stateParams);
        }
    })

    .state('state2', {
            url: 'state2/:id',
            templateUrl: 'state-2.html',
            controller : function ($scope, $state, $stateParams) {
              $scope.params = $stateParams;
              $scope.go = function () {
                $state.go('state1', { someOtherParam : 'lazy lizard' });
              };

              console.log('state2 params:', $stateParams);
            }
        })

Here is a working example of passing state params on jsfiddle.

Asaf Katz · Accepted Answer · 2014-03-24 13:58:19Z

the solutions above works but for my case I needed to pass query parameter so I dit it like this:

$stateProvider
        .state('state1', {
            url: '/state1?other',
            templateUrl: 'state-1.html',
            controller : function ($scope, $state, $stateParams) {
              $scope.params = $stateParams;
              $scope.go = function () {
                $state.go('state2', { someParam : 'broken magic' });
              };

              console.log('state1 params:', $stateParams);
            }
        })
        .state('state2', {
            url: '/state2?someParam',
            templateUrl: 'state-2.html',
            controller : function ($scope, $state, $stateParams) {
              $scope.params = $stateParams;
              $scope.go = function () {
                $state.go('state1', { other : 'lazy lizard' });
              };

              console.log('state2 params:', $stateParams);
            }
        });

bummi · Accepted Answer · 2015-07-03 22:31:16Z

1

Make a transport and use it!

angular_app.factory('$$transport', function($q) {
    var transport;
    return transport = {
        dfr: $q.defer(),
        push: function(v) {
            return transport.dfr.resolve(v);
        },
        then: function(s, f) {
            if (f == null) {
                f = function() {};
            }
            return transport.dfr.promise.then(function(_s) {
                s(_s);
                transport.dfr = $q.defer();
                return transport.then(s, f);
            }, function(_f) {
                f(_f);
                transport.dfr = $q.defer();
                return transport.then(s, f);
            });
        }
    };
});
$stateProvider.state('state1', {
            url: '/state1?other',
            templateUrl: 'state-1.html',
            controller : function ($scope, $state, $$transport) {
              $$transport.then(function(s) {
                $scope.param = s
                console.log('state1 params:', s);
              });
              $scope.go = function () {
                $state.go('state2', { someParam : 'broken magic' });
              }
            }
        })
        .state('state2', {
            url: '/state2?someParam',
            templateUrl: 'state-2.html',
            controller : function ($scope, $state, $$transport) {
              $scope.go = function () {
                $$transport.push({other:'lazy lizard'});
                $state.go('state1');
              };
            }
        });

edited Jul 3, 2015 at 22:31

bummi

27.4k14 gold badges67 silver badges105 bronze badges

answered Jul 3, 2015 at 22:23

xema

191 bronze badge

2 Comments

user216661 Over a year ago

What is a transport and what is $$transport? Please provide some documentation. Thank you.

C0ZEN Over a year ago

$$ should not be used. There are better solutions.

Collectives™ on Stack Overflow

angular UI router | $stateParams not working

5 Answers 5

5 Comments

7 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

7 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related