angularjs - $stateParams 返回未定义

Question

我定义了这些路线:

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

我让这个 Controller 尝试使用由 sport.selected 状态给出的 :sport 参数。

     angular.module('myApp')
       .controller('SportCtrl', ['$scope', 'ParseService', 
                   '$stateParams', function ($scope, ParseService, $stateParams) {

          var sportURL = $stateParams.sport;

      ...
    });

出于某种原因，当我在 Controller 中调用 $stateParams.sport 时，它返回 undefined，即使我认为我在路由中定义了它。
为什么会这样？

谢谢你的帮助!

Answer 1

当您访问 URL /sport/12 时, SportCtrl将被实例化两次:一次用于状态 sport , 一次为状态 sport.selected .而对于第一个状态，没有与状态相关的参数，所以 $stateParams.sport未定义。

请注意，对一个状态和一个子状态使用相同的模板是很奇怪的。您会将模板嵌入到同一模板的 ui-view div 中。