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.

Answer 1

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.