$stateParams返回undefined

Question

我有这些路由定义：

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

我有一个控制器，试图使用通过sport.selected状态给出的:sport参数。

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

          var sportURL = $stateParams.sport;

      ...
    });

由于某种原因，当我在控制器中调用$stateParams.sport时，它返回undefined，尽管我认为我已经在路由中定义了它。为什么会出现这种情况？

谢谢你的帮助！

- nggonzalez

Answer 1

当您访问URL /sport/12 时，SportCtrl 将被实例化两次：一次是为状态 sport，另一次是为状态 sport.selected。对于第一个状态，与该状态相关联的参数不存在，因此 $stateParams.sport 未定义。

请注意，将同一模板用于状态和子状态非常奇怪。您会将模板嵌入到相同模板的 ui-view div 中。

- JB Nizet

---

谢谢，我对使用ui-view还很陌生，所以这让我有点困惑。最终我创建了一个新的控制器，并将其不再作为子状态，现在它可以正常工作了。 - nggonzalez