AngularJS UI路由器共享嵌套路由/状态

Question

我想在多个州之间分享一个孩子状态。 例如，我有一个购物网站。

假设我有以下

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

但是我也有一个使用ui-bootstrap模态的购物车。

现在我知道如何创建

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

并让他们包含相同的服务模式来共享代码，但我希望每个页面都有一个可深度链接的购物车，使用后退按钮关闭它。那我该怎么办

.com/*/shoppingCart

无需手动将嵌套状态添加到每个状态？

我在购物车中使用onEnter打开模态。

Answer 1

我认为不可能有状态匹配/*/shoppingCart，因为状态和URL之间的映射应该是一对一的。

但是，手动将嵌套的购物车状态添加到每个州可能并不是那么糟糕。只需为它创建一个函数，例如$stateProvider config中的代码：

//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);