Question

这是我的$stateProvider配置：

.state('itemDetail', {
    abstract: true,
    url: '/itemDetail/general/:itemid',
    controller: 'ItemDetailsController',
    templateUrl: './partials/itemDetails.html'
})
.state('itemDetail.general', {
    url: "",
    controller: 'ItemDetailsController',
    templateUrl: "./partials/itemDetails.General.html"
})
.state('itemDetail.file', {
    url: "/file/:itemid",
    controller: 'ItemDetailsController',
    templateUrl: "./partials/itemDetails.File.html"
})

用户可以使用#/itemDetail/general/96045查看项目，并可以单击链接查看文件附件。现在它正常工作，但文件的URL现在是#/itemDetail/general/96045/file/96045。

是否可以将文件的网址设为#/itemDetail/file/96045？

Answer 1

好吧，我会选择一个父级，只有 one child 状态。有a working plunker

这将是新的子状态itemDetail.type：

.state('itemDetail', {
  abstract: true,
  url: '/itemDetail',
  controller: 'ItemDetailsController',
  templateUrl: 'partials/itemDetails.html'
})
.state('itemDetail.type', {
  url: "/:type/:itemid",
  controller: 'ItemDetailsController',
  templateProvider: ['$stateParams', '$templateRequest', 
    function($stateParams, $templateRequest) {
      var url = "partials/itemDetails.General.html";
      if($stateParams.type === "file"){
          url = "partials/itemDetails.File.html"  
      }
      return $templateRequest(url);
  }],
})

我们在这里使用$stateParams.type来决定加载哪个模板（以及$templateRequest从内置缓存的angula中获利）

这将是调用html：

<a ui-sref="itemDetail.type({type:'general', itemid:1})">
<a ui-sref="itemDetail.type({type:'file', itemid:22})">

现在，网址将按预期显示

检查here

Answer 2

是的，您可以将状态视为

.state('itemDetail.file', {
        url: '/{itemId}',
        controller: 'ItemDetailsController',
        templateUrl: 'partials/itemDetails.html'
    })

如何在UI路由器中简化URL

2 个答案: