javascript - 具有抽象 View 冲突的 UI-Router 路由

Question

我正在使用 UI-Router 并且需要在另一个 View 中有一个 subview 。我需要在“狗” View 中渲染“所有者” View 。为此目的，以下工作:

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

问题是 url 结构不是最理想的。目前要访问特定的“狗”，您必须转到 /dog/dogId。但是，我希望它是 /dogs/dogId，因为这更符合标准 REST 原则。不幸的是，当我将'dogAbstract' url 更改为/dogs 时，它与“dogsList”页面发生冲突，我只能选择其中之一。

有没有办法让它工作，以便我可以在 /dogs 中获得列表并在 /dogs/dogId 中查看单个狗？

Answer 1

有a working plunker

重点是改变定义的顺序:

the less specific url first, the more detailed last

因为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