angularjs - UI 路由器，在服务中使用 stateparams

Question

我有这个状态:

  .state('admin.category',{
    url: '/category',
    templateUrl:'views/admin.category.html',
    resolve:{
      category: ['CategoryLoader', function(CategoryLoader){
        return new CategoryLoader();
      }]
    },
  })

这是我解决的服务。

.factory('CategoryLoader',['Category', '$state', '$q',
  //console.log($state)
  function(Category, $state, $q){
    return function(){
      var delay = $q.defer();
      Category.get({cat_id:$state.params.id}, //not working
        function(category){
          delay.resolve(category);
        },
       function(){
         //delay.reject('Unable to fetch category ' + $state.params.cat_id)
      });
      return delay.promise;
    }
}]);

如果我将 $state.params.id 更改为数字，则一切正常。如果我在我的服务中控制 $state，我会得到一切，包括参数。但我似乎无法使用它。使用我在其他项目中使用过的 $route.current.params.id 应该是 equiliant。我如何用 ui-router 做同样的事情？

更新:更多信息

父状态:

  .state('admin',{
    abstract: true,
    url: '/admin',
    templateUrl:'views/admin.html'
  })

类别工厂:

  factory('Category', function($resource){
    return $resource('/api/category/byId/:id/', {id: '@id'});
  })

如果需要，我会整理一把 fiddle

Answer 1

我在这里看到的问题是您正在尝试访问 $stateParams 之前 国家准备好了。改变状态时会发生几个事件。

首先是$stateChangeStart通知您要更改到和来自的状态以及两个状态中的所有参数。

在此之后，决心开始发生。您的情况下的解决方法是调用一个使用 $stateParams 的函数

在一切都解决好之后(没有拒绝或错误)，就在 $stateChangeSuccess 之前事件，state params are updated in the $stateParams object .

基本上，您无法通过 $stateParams 访问要更改到的状态的参数。对象直到 后 状态更改完成。这是在状态更改被拒绝且无法更改的情况下完成的。在这种情况下，前一个状态保持不变，前一个状态的参数将在 $stateParams 中。 .

作为快速解决方法，您可以使用 $stateChangeStart 事件访问 toParams (您要更改到的状态的参数)并将它们放在某处( $rootScope 或服务)，以便您可以在需要时访问它们。

这是一个带有 $rootScope 的快速示例

.run(['$rootScope', function($rootScope){
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        $rootScope.toParams = toParams;
    });
}]);

.factory('CategoryLoader',['$rootScope', 'Category', '$q',
  function($rootScope, Category, $q){
    return function(){
      var delay = $q.defer();
      Category.get({cat_id: $rootScope.toParams.id}, // <-- notice its using the object we put in $rootScope, not $state or $stateParams
        function(category){
          delay.resolve(category);
        },
       function(){
         //delay.reject('Unable to fetch category ' + $state.params.cat_id)
      });
      return delay.promise;
    }
}]);

另外，我相信您的资源没有设置为正确使用您传递的 ID。您正在使用 cat_id上面，为了将它链接到 :id的 URL，您必须将其映射为 `{id: '@cat_id'}

factory('Category', function($resource){
    return $resource('/api/category/byId/:id/', {id: '@cat_id'});
});