web-dev-qa-db-fra.com

ui-routeur résoudre avec des paramètres dynamiques

C'est probablement simple, mais je ne trouve rien dans la documentation et googler n'a pas aidé. J'essaie de définir un état dans $stateProvider où l'URL que je dois trouver sur le serveur pour extraire les données nécessaires dépend d'un paramètre d'URL d'état. En bref, quelque chose comme:

 .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; });
      }
    }
  })

Ce qui précède ne fonctionne pas. J'ai essayé de m'injecter $routeParams pour obtenir le paramètre nécessaire cat, sans aucune chance. Quelle est la bonne façon de faire cela?

angularjsangular-uiangular-ui-router
54
kliron

Vous étiez proche avec $routeParams. Si vous utilisez ui-router, utilisez $stateParams au lieu. Ce code fonctionne pour moi:

.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; });
         }]
     }
})
105
Reto

Pour ceux qui utilisent ui-router 1.0 $stateParamsest obsolète , vous devriez utiliser $transition$ objet à la place:

.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; });
         }]
     }
})
9
Konstantin Azizov