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

Question

我正在使用UI-Router，需要在另一个视图中使用子视图。 我需要在“狗”视图中呈现“所有者”视图。 以下工作用于此目的：

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',
})

问题是网址结构不是最理想的。 目前要访问特定的“狗”，你必须去/dog/dogId 。 但是，我希望它是/dogs/dogId因为使用标准REST原则会更好。 不幸的是，当我将'dogAbstract'url更改为/dogs ，它与“dogsList”页面冲突，而我只能拥有其中一个。

有没有办法使它工作，以便我可以在/dogs和/dogs/dogId狗/dogs/dogId看到一个单独的狗？

Answer 1

有一个工作的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',
  ...
})

在这里检查它