web-dev-qa-db-de.com

ui-router auflösung mit dynamischen parametern

Das ist wahrscheinlich einfach, aber ich kann nichts in den Dokumenten finden und googeln hat nicht geholfen. Ich versuche, einen Status in $stateProvider Zu definieren, wobei die URL, die ich auf dem Server treffen muss, um die erforderlichen Daten abzurufen, von einem Status-URL-Parameter abhängt. Kurz gesagt, so etwas wie:

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

Das oben genannte funktioniert nicht. Ich habe versucht, $routeParams Zu injizieren, um den benötigten cat -Parameter zu erhalten, ohne Erfolg. Wie geht das richtig?

angularjsangular-uiangular-ui-router
54
kliron

Sie waren nah mit $routeParams. Wenn Sie einen UI-Router verwenden, verwenden Sie $stateParams stattdessen. Dieser Code funktioniert für mich:

.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

Für diejenigen, die ui-router 1.0 verwenden $stateParamsist veraltet , verwenden Sie $transition$ Objekt stattdessen:

.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