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 配置中的此代码：

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