角度UI路由器多个命名视图

Question

期望的行为

我正在使用AngularJS和Angular UI-Router。

1. 我想允许两个子州共享父州。
2. 我希望子状态用自己的视图填充父状态视图中的ui-view。
3. 我希望这两个子状态中的一个在他们的视图中有三个ui-view，每个状态都有视图。

尝试图表：

Parent: <ui-view>
        filled by
          Child:  <ui-view> <ui-view> <ui-view>
                    filled    filled   filled

我的情况的具体细节

我有一个名为category-details的州。在这个抽象状态的视图中，我有一个未命名的ui-view。在两个子状态之一（category-details.selected）中，我想使用multiple named views。

当前的工作策略

这是抽象的状态。非常基础，但包含在内供您参考。

.state('category-details', {
    abstract: true,
    data: {
        pageTitle: 'Category Details'
    },
    templateUrl: "views/category-details.html",
})

在category-details.selected状态（具有多个命名视图的州）中，我将ui-view的未命名category-details.html设置为category-details-selected.html：

.state('category-details.selected', {
    views: {
        '': {
            templateUrl: 'views/category-details-selected.html',
            controller: 'CategoryDetailsSelectedCtrl'
        }
    }
})

在category-details-selected.html视图的内部，我有三个名为ui-views：

<div ui-view="firstNamedView"></div>
<div ui-view="secondNamedView"></div>
<div ui-view="thirdNamedView"></div>

最后，我定义了一个设置这三个ui-view的状态，以满足我想要的行为的第三部分：

.state('category-details.selected.aspect', {
    url:"/category-details/:selectedCategory",
    views: {
        'firstNamedView': {
            templateUrl: 'views/first-named-view.html',
            controller: 'FirstNamedViewCtrl'
        },
        'secondNamedView': {
            templateUrl: 'views/second-named-view.html',
            controller: 'SecondNamedViewCtrl'
        },
        'thirdNamedView': {
            templateUrl: 'views/third-named-view.html',
            controller: 'ThirdNamedViewCtrl'
        }
    }
});

为什么我的解决方案很尴尬和次优

添加category-details.selected.aspect状态以设置ui-view视图的常量元素（三个category-details-selected）是不必要的。每次我想要多个命名视图时，它都会强制创建一个额外的状态。

我尝试过什么

我相信我应该能够将category-details.selected.aspect状态的网址和视图移动到其父状态（views）的category-details.selected组件中。这看起来像是：

.state('category-details.selected', {
    url:"/category-details/:selectedCategory",
    views: {
        '': {
            templateUrl: 'views/category-details-selected.html',
            controller: 'CategoryDetailsSelectedCtrl'
        },
        'firstNamedView': {
            templateUrl: 'views/first-named-view.html',
            controller: 'FirstNamedViewCtrl'
        },
        'secondNamedView': {
            templateUrl: 'views/second-named-view.html',
            controller: 'SecondNamedViewCtrl'
        },
        'thirdNamedView': {
            templateUrl: 'views/third-named-view.html',
            controller: 'ThirdNamedViewCtrl'
        }
    }
})

这导致未命名的ui-view被正确设置，但是三个名为ui-view的未填充。

由于选择了三个名为ui-view的问题，我接着尝试使用absolute selectors described here来选择它们。这并没有解决问题。我试过了：

firstNamedView
firstNamedView@
firstNamedView@category-details.selected
(others of course)

结束语

我想象的是可能的，是另一种更好的方式，还是我目前最好的方法？归结为分配同时设置的父ui-view的子ui-view。我认为最后一句话太孤独了，所以我把整个例子都包括在内。

如果我能提供更多的说明，请告诉我。谢谢。