$stateParams returning undefined

Question

I have these routes defined:

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

And I have this controller trying to use the :sport param given 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, even though I think I defined it in the routes. Why is this the case?

Thanks for your help!

Answer 1

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

Note that it's quite strange to use the same template for a state and a sub-state. You'll have the template embedded inside the ui-view div of the same template.