$ stateParams returning undefined

Question

I defined these routes:

.state('sport', url: '/sport' templateUrl: '/templates/sport' controller: 'SportCtrl' ) .state('sport.selected' url: '/:sport' templateUrl: '/templates/sport' controller: 'SportCtrl' ) 

And I am trying to use this controller: a sports parameter specified by sport.selected state.

  angular.module('myApp') .controller('SportCtrl', ['$scope', 'ParseService', '$stateParams', function ($scope, ParseService, $stateParams) { var sportURL = $stateParams.sport; ... }); 

For some reason, it returns undefined when I call $ stateParams.sport in the controller, although I think I defined it in the routes. Why is this so?

Thank you for your help!

Answer 1

When you access URL /sport/12 , SportCtrl will be created twice: once for the sport state and once for the sport.selected state. And for the first state there is no parameter associated with the state, so $stateParams.sport is undefined.

Note that it’s rather strange to use the same template for state and sub-state. You will have a template embedded in the ui-view div of the same template.