AngularJS UI Router разделяет вложенные маршруты/состояния

Я хочу поделиться дочерним состоянием между несколькими состояниями. Например, у меня есть торговый сайт.

Допустим, у меня есть следующее

.com/random
.com/browse
.com/browse/product/:productID
.com/browse/:search/product/:productID

однако у меня также есть корзина для покупок, использующая модальное окно из ui-bootstrap.

Теперь я знаю, как создать

.com/browse/shoppingCart
.com/random/shoppingCart

и пусть они включают один и тот же модальный сервис для обмена кодом, но я хочу, чтобы на каждой странице была корзина покупок с возможностью глубокой ссылки, которая работает с кнопкой «Назад», чтобы закрыть ее. так как я могу сделать

.com/*/shoppingCart

без необходимости вручную добавлять вложенное состояние в каждое отдельное состояние?

Я использую onEnter в корзине, чтобы открыть модальное окно.


angularjs nested-routes angular-ui-router angular-ui-bootstrap
person Jegsar    schedule 03.08.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не думаю, что возможно совпадение состояния /*/shoppingCart, потому что сопоставление между состояниями и URL-адресами должно быть взаимно однозначным.

Однако ручное добавление состояния вложенной корзины в каждое состояние может быть не таким уж плохим. Просто создайте для него функцию, например, этот код в вашей конфигурации $stateProvider:

//function for adding a child shoopingCart state to a state
function addShoppingCartState (stateName) {
  $stateProvider.state(stateName + '.shoppingCart', {
    url: '/shoppingCart',
    templateUrl: 'views/shopping-cart.html',
    data: {
      parentStateName: stateName // for use in the controller
    },
    controller: 'MyShoppingCartController'
  });
}
// Add a child shoppingCart state to all the states you want.
['random','browse','browse.product','browse.search'].forEach(addShoppingCartState);
person Valentin Waeselynck    schedule 06.08.2014