AngularUI urlRouterProvider.when динамическая маршрутизация с дополнительными параметрами

Question

Я пытаюсь создать маршруты с дополнительными параметрами; По-видимому, ui.route не обладает такой способностью (хотя ngRoute существует уже почти навсегда). Поэтому вместо того, чтобы я назначил их в качестве параметров запроса и я пытаюсь перевести их в соответствующую RESTful URL, который будет разобранной за $ stateParams:

В синтаксисе ngRouter, я бы указать: /:resource/:collection?/:type?/:index?

В ui.router, Я указан как: /:resource?collection&type&index

и я пытался переводить его динамически с функцией, которая возвращает путь (пробовал как с .При() и с .rule()):

$urlRouterProvider 
.when('' , '/index') 
.when('/', '/index') 
.when(urlMatcher.source , function convertToREST($match , $stateParams) 
{ 
    var params = [$match.resource]; 
    if (angular.isDefined($match.collection)) params[1] = $match.collection; 
    if (angular.isDefined($match.type))  params[2] = $match.type; 
    if (angular.isDefined($match.index))  params[3] = $match.index; 
    var result = '/' + params.join('/'); 
    return result; 
}) 
.otherwise('/404'); 

выше не отображает представление (удалите третий .when(), и представление отобразится просто отлично).

И вручную:

$urlRouterProvider 
.when('' , '/index') 
.when('/', '/index') 
.when('/:resource?collection' , '/:resource/:collection') 
.otherwise('/404'); 

Это, по-видимому приводит к круговой итерации. Я получил эту ручную идею из примера приложения ui-router: state.js#L16. Единственное различие, которое я вижу, это то, что мой начинается с параметра, но я не понимаю, что это имеет значение.

Answer 1

Если я правильно понял вопрос, то, что вы пытаетесь достичь, является необязательным параметром для вашего URL-адреса.

Ui.router предоставляет эту функцию, существует несколько опций для указания параметров. Основной параметр выглядит следующим образом:

$stateProvider 
    .state('contacts.detail', { 
     url: "/contacts/:contactId", 
     templateUrl: 'contacts.detail.html', 
     controller: function ($stateParams) { 
      // If we got here from a url of /contacts/42 
      expect($stateParams).toBe({contactId: "42"}); 
     } 
    }) 
Alternatively you can also use curly brackets: 

// identical to previous example 
url: "/contacts/{contactId}" 

Вы должны разрешить Params в родительском пути, если вы вложенности состояний, такой случай, который можно найти в документации:

$stateProvider.state('contacts.detail', { 
    url: '/contacts/:contactId', 
    controller: function($stateParams){ 
     $stateParams.contactId //*** Exists! ***// 
    } 
}).state('contacts.detail.subitem', { 
    url: '/item/:itemId', 
    controller: function($stateParams){ 
     $stateParams.contactId //*** Watch Out! DOESN'T EXIST!! ***// 
     $stateParams.itemId //*** Exists! ***// 
    } 
}) 

Решение использовать решимость заявление в родительском маршрут

$stateProvider.state('contacts.detail', { 
    url: '/contacts/:contactId', 
    controller: function($stateParams){ 
     $stateParams.contactId //*** Exists! ***// 
    }, 
    resolve:{ 
     contactId: ['$stateParams', function($stateParams){ 
      return $stateParams.contactId; 
     }] 
    } 
}).state('contacts.detail.subitem', { 
    url: '/item/:itemId', 
    controller: function($stateParams, contactId){ 
     contactId //*** Exists! ***// 
     $stateParams.itemId //*** Exists! ***// 
    } 
}) 

Как показано извлечение результата является использование $ stateParams в вашем Contr Oller как этот

$stateParams.contactId 

Вы можете передать documentation для более подробной информации.