UI的路由器，使用服务stateparams [英] UI-router, use stateparams in service

问题描述

我有这样的状态：

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

这是我的服务，我解决。

This is my service which I resolve.

.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多项一切正常。如果我在服务控制台中$状态，我得到的一切，包括PARAMS。但我似乎无法使用它。应该equiliant使用$ route.current.params.id，我已经在其他项目中使用。我该怎么做同样的事情UI的路由器？

Everything works if I change $state.params.id to a number. If I console the $state in my service, I get everything, including params. But I can't seem to be using it. It should be equiliant to use $route.current.params.id, which I've used in other projects. How do I do the same thing with ui-router?

更新：一些更多的信息

父状态：

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

类别工厂：

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

我会放在一起捣鼓如果necassary

I'll put together a fiddle if necassary

推荐答案

我看到这里的问题是，你之前<试图访问 $ stateParams / STRONG>国家已准备就绪。有更改状态时发生的一些事件。

The issue I see here is that you are trying to access the $stateParams before the state is ready. There are several events that happen when changing states.

首先是 $ stateChangeStart ，你被告知你正在改变，并从以及未来所有在这两个州的PARAMS的状态。

First is $stateChangeStart where you are notified of the state you are changing to and coming from as well as all of the params in both states.

这之后，决心开始发生。你的情况是决心调用使用功能 $ stateParams

After this, the resolve starts to happen. The resolve in your case is calling a function that uses $stateParams

在一切都解决好（没有拒绝或错误），只是之前的 $ stateChangeSuccess 事件中，<一个href=\"https://github.com/angular-ui/ui-router/blob/355d5a1e5ee61a3ad3bcf267584f11729451ae60/src/state.js#L908\"相对=nofollow>状态PARAMS在 $ stateParams 对象更新。

After everything is resolved and good (no rejections or errors), and just prior to the $stateChangeSuccess event, the state params are updated in the $stateParams object.

基本上，你不能访问PARAMS为要更改为通过 $ stateParams 对象，直到状态的在状态更改完毕。这在情况下完成的状态改变被拒绝，并且不能被改变。在这种情况下，previous状态保持和previous国家的PARAMS将在 $ stateParams 。

Basically, you cannot access the params for the state you are changing to via the $stateParams object until after the state change is completed. This is done in case the state change is rejected and cannot be changed. In this case, the previous state remains and the previous state's params will be in $stateParams.

作为一个快速的解决方法，你可以使用 $ stateChangeStart 事件访问 toParams （在PARAMS的状态你正在改变到），并把它们的地方（ $ rootScope ，或服务），以便在需要时您可以访问它们。

As a quick work-around, you can use the $stateChangeStart event to access the toParams (the params for the state you are changing to) and put them somewhere ($rootScope, or a service) so you can access them when you need them.

下面是一个简单的例子与 $ rootScope

Here is a quick example with $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 的网址，你将不得不地图它作为`{ID：'@cat_id'}

Also, I believe your resource is not setup to correctly use the id you are passing. You were using cat_id above, in order to link it to the :id of the URL, you would have to map it as `{id: '@cat_id'}

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

这篇关于UI的路由器，使用服务stateparams的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！