$stateParams are empty in controller

Question

I'm using ui.router to load a view then different APIs route that need 2 params : username and id

app.route.js

 angular
    .module('app.route',['ui.router'])
    .config([
        '$stateProvider',
        '$urlRouterProvider',
        function ($stateProvider, $urlRouterProvider) {

            $urlRouterProvider.when('', '/{username}/{id:int}');
            $urlRouterProvider.when('/', '/{username}/{id:int}');
            $urlRouterProvider.otherwise('/{username}/{id:int}');

            $stateProvider.state('module', {
                url: '/{username}/{id:int}',
                templateUrl: 'app/module/module.html',
                controller: 'ModuleController',
            });

        }
    ]);

module.controller.js

 function ModuleController($state, $stateParams) {

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

even if my url seems fine (eg. http://myurl.com/#/johndoe/2 ) both params are ignored. Do I miss something ?

Here's the output :

 $stateParams:  Object {}
 $state.params:  Object {}

I don't have any errors related to it. I get some 404 about routes because of course, params are expected.

I use a classical <div ui-view='module'></div> on index page — user1713964
– user1713964, Commented Jun 4, 2015 at 19:39
are you sure of the declaration of your controller, could we see full code ? angular.controller('ModuleController', function($state, $stateParams){...}) — MamaWalter
– MamaWalter, Commented Jun 4, 2015 at 19:47
Just created a plunker and could reproduce same issue : plnkr.co/edit/pEvfe0W5oiimwWzhoxMe?p=preview — user1713964
– user1713964, Commented Jun 4, 2015 at 20:04
You are not injecting $state and $stateParams in your controller declaration. .controller('ModuleController', ["$state", "$stateParams", ModuleController]); — Jasen
– Jasen, Commented Jun 4, 2015 at 20:08

Brad Barber · Accepted Answer · 2015-06-05 01:56:18Z

There are a few issues with what you have above.

You had ng-controller="ModuleController" in your html a couple times - those instances were getting created but I think you only wanted the one controller associated with the ui-view to be created. When you define a controller for a state you don't need to use ng-controller.
The $urlRouterProvider.otherwise needs to go to a fully defined state - the state params need to be defined. Typically this would be a "home" state without params, but I updated your example to go to /user/none/0. Your version had the otherwise going to a invalid state since "{id:int}" isn't an int.

You can remove the $urlRouterProvider.when statements and update the otherwise to $urlRouterProvider.otherwise('/user/none/0'); to go to a default state. Then get to different routes with ui-sref or $state.go:

<a ui-sref="module({username:'user 1', id: 1})">User 1</a>

In the html you were using a named view (ui-view="module") but not in the state definition...just change the html to ui-view.

Here's an updated plunker based on your previous one: http://plnkr.co/edit/LaSioepCFrt8kmNbUm57?p=preview

Collectives™ on Stack Overflow

$stateParams are empty in controller

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related