Question

我正在使用UI-Router，需要在另一个视图中使用子视图。我需要渲染＆＃34;所有者＆＃34;查看＆＃34; dog＆＃34;视图。以下是为此目的而工作的：

UI-Router配置如下

.state('dogAbstract', {
    url: '/dog/:dogId',
    abstract: true,
    templateUrl: 'client/dogs/views/dog.ng.html',
    controller: 'dogCtrl',
})
.state('dog', {
    url: "",
    parent: "dogAbstract",
    views: {
        "owner": {
            templateUrl: 'client/owners/views/owner.ng.html',
            controller: 'ownerCtrl'
        }
    }
})
.state('dogsList', {
    url: '/dogs',
    templateUrl: 'client/moves/views/dogs-list.ng.html',
    controller: 'dogsListCtrl',
})

问题是网址结构不是最理想的。目前要访问特定的狗＃34;你必须去/dog/dogId。但是，我希望它是/dogs/dogId，因为使用标准REST原则会更好。不幸的是，当我改变了'dogAbstract＆＃39; url to /dogs，它与＆＃34; dogsList＆＃34;页面，我只能有一个或另一个。

有没有办法让它工作，以便我可以在/dogs找到列表并在/dogs/dogId查看个别狗？

Answer 1

有a working plunker

重点是改变定义的顺序：

首先是不太具体的网址，最后更详细的

因为UI-Router使用状态声明的顺序来设置优先级。首先匹配 - 使用：

// if /dogs is url, this will match
.state('dogsList', {
  url: '/dogs',
  ...
})

// if /dogs + something e.g. /dogs/1 - this ONLY will fit
.state('dogAbstract', {
  url: '/dogs/:dogId',
  ...
})

检查行动here

UI-Router路由与抽象视图冲突

1 个答案: