ui-router使用动态参数解析

时间:2013-09-25 18:33:53

标签: angularjs angular-ui angular-ui-router

这可能很简单,但我在文档中找不到任何内容,谷歌搜索没有帮助。我正在尝试在$stateProvider中定义一个状态,其中我需要在服务器上点击以获取所需数据的URL取决于状态URL参数。简而言之,就像:

 .state('recipes.category', {
    url: '/:cat',
    templateUrl: '/partials/recipes.category.html',
    controller: 'RecipesCategoryCtrl',
    resolve: {
      category: function($http) {
        return $http.get('/recipes/' + cat)
          .then(function(data) { return data.data; });
      }
    }
  })

以上不起作用。我尝试注入$routeParams以获取所需的cat参数,但没有运气。这样做的正确方法是什么?

2 个答案:

答案 0 :(得分:105)

你与$routeParams关系密切。如果您使用ui-router而使用$stateParams。 这段代码适合我:

.state('recipes.category', {
    url: '/:cat',
    templateUrl: '/partials/recipes.category.html',
    controller: 'RecipesCategoryCtrl',
    resolve: {
         category: ['$http','$stateParams', function($http, $stateParams) {
             return $http.get('/recipes/' + $stateParams.cat)
                    .then(function(data) { return data.data; });
         }]
     }
})

答案 1 :(得分:8)

对于使用ui-router 1.0 $stateParams is deprecated的用户,您应该使用$transition$对象:



.state('recipes.category', {
    url: '/:cat',
    templateUrl: '/partials/recipes.category.html',
    controller: 'RecipesCategoryCtrl',
    resolve: {
         category: ['$http','$transition$', function($http, $transition$) {
             return $http.get('/recipes/' + $transition$.params().cat)
                    .then(function(data) { return data.data; });
         }]
     }
})