AngularJs UI路由器URL格式化

Question

我正在使用angularjs-ui router模塊來管理我的狀態。

我有這樣的結構：

$stateProvider.state('menu', { 
     templateUrl: '/templates/menu/wrap.html', 
     params: { 
      slug: { 
       value: '' 
      }, 
      id: { 
       value: null 
      } 
     }, 
     ncyBreadcrumb: { 
      label: 'Menu' 
     } 

    }).state('menu.list', { 
     url: '/:slug', 
     parent: 'menu', 
     params: { 
      slug: { 
       value: '' 
      }, 
      id: { 
       value: null 
      }, 
      Name: { 
       value: '{{Name}}' 
      }, 
      Type: { 
       value: null 
      } 
     }, 

     views: { 
      // the main template will be placed here (relatively named) 
      '': { 
       templateUrl: '/templates/menu/main.html', 
       controller: 'MenuMainCtrl as MNC' 
      }, 

      // for column two, we'll define a separate controller 
      'productList@menu.list': { 
       templateUrl: '/templates/menu/productlist.html', 
       controller: 'ProductListCtrl as PLC' 
      }, 
      // for column two, we'll define a separate controller 
      'navigation@menu.list': { 
       templateUrl: '/templates/menu/navigation.html', 
       controller: 'MenuNavigationCtrl as MN' 
      }, 
      // for column two, we'll define a separate controller 
      'cart@menu.list': { 
       templateUrl: '/templates/menu/cart.html', 
       controller: 'CartCtrl as CC' 
      } 
     }, 
     ncyBreadcrumb: { 
      label: '{{Name}}' 
     } 
    }).state('menu.detail', { 
      parent: 'menu.list', 
      url: '/:productSlug', 
      params: { 
       productID: { 
        value: "" 
       }, 
       productSlug: { 
        value: "" 
       }, 
       productName: { 
        value: "" 
       }, 
       Name: { 
        value: "Breakfast" 
       }, 
       Type: { 
        value: null 
       }, 
       MenuListItemID: { 
        value: null 
       } 

      }, 
      views: { 
       '@': { 
        templateUrl: '/templates/menu/productSingle.html', 
        controller: 'ProductSingleCtrl as PSC' 
       } 
      }, 

      ncyBreadcrumb: { 
       label: '{{productName}}' 
      } 

     }); 

見名爲 「menu.detail」 最後的狀態。這個的基本URL是「/ menu /」，當這個狀態激活時，我的URL是例如。 「localhost：8081/menu/breakfast-sandwiches/farmtotable-breakfast-sandwiches」但我的客戶想要成爲「localhost：8081/product/farmtotable-breakfast-sandwiches」。

這是甚至可能的，如果是，你能幫我嗎？

Answer 1

您可以覆蓋父URL方式如下：

.state('menu.detail', { 
    parent: 'menu.list', 
    url: '^/product/:productSlug', 
    params: { 
     productID: { 
      value: "" 
     }, 
     productSlug: { 
      value: "" 
     }, 
     productName: { 
      value: "" 
     }, 
     Name: { 
      value: "Breakfast" 
     }, 
     Type: { 
      value: null 
     }, 
     MenuListItemID: { 
      value: null 
     } 

    }, 
    views: { 
     '@': { 
      templateUrl: '/templates/menu/productSingle.html', 
      controller: 'ProductSingleCtrl as PSC' 
     } 
    }, 

    ncyBreadcrumb: { 
     label: '{{productName}}' 
    } 

});