Asaf Katz Asaf Katz -4 years ago 129
AngularJS Question

angular UI router | $stateParams not working

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download