Javascript 从模板启动多个命名视图

我正在使用

ui路由器

，并创建了一个包含多个子状态的父状态，如下所示：

.state('portfolio.patent', {
    url: '/:patentId',
    controller: 'patentItemCtrl',
    controllerAs: '$ctrl',
    templateUrl: 'app/templates/patent/patent.patent-item.tpl.htm',

})
.state('portfolio.patent.patent-info', {
    templateUrl: 'app/templates/patent/patent.patent-info.tpl.htm',
    url: '/',
    controller: 'patentInfoCtrl',
    controllerAs: '$ctrl'      
})
.state('portfolio.patent.notifications', {
    templateUrl: 'app/templates/notifications/notifications.tpl.htm',
    url: '/',            
    controller: 'notificationsCtrl',
    controllerAs: '$ctrl'
})

我希望这些子状态加载到单独的选项卡中，在左右

tabset

之间拆分，如下所示：

<div class="col-xl-6 ">
    <uib-tabset active="activeLeft">
        <uib-tab index="0" heading="Details" data-ui-sref=".patent-info"></uib-tab>
    </uib-tabset>
    <div ui-view></div> 
</div>
<div class="col-xl-6">
    <uib-tabset active="activeRight">
        <uib-tab index="1" heading="Notifications" data-ui-sref=".notifications"></uib-tab>
    </uib-tabset>
    <div ui-view></div>
</div>

它的工作原理是视图加载内容，但当然没有命名视图，所选选项卡在左侧和右侧

ui视图中加载内容，而不是在左侧选项卡集中加载
patent info
，在右侧选项卡集中加载通知

问题

如果我将ui视图调整为
，您就没有为子视图正确构建您的状态。您不需要有多个状态，而是需要一个父状态，它的子状态具有
views
属性。下面是一个超级精心设计的简单示例，仅用于说明子视图的使用。您可以为每个子视图定义一个控制器（事实上，我很确定它与
状态
具有所有相同的属性，除了没有
url
），就像您为常规状态定义控制器一样。导航发生在父级，因此您永远不会实际导航到子视图，它们与父视图一起加载


angular.module（'app'，['ui.router']））
.config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/'）；
$stateProvider
.州（'父'{
url:“/”，
观点：{
“leftTab”：{
模板：“这是左侧选项卡”
},
“右选项卡”：{
模板：“这是正确的选项卡”
}
}
});
});

感谢您的回复。我理解这一部分，但是在
leftTab
和
rightab
视图中，我需要
专利信息
和
通知
的进一步视图。因此本质上会有
父视图
>，然后是子视图
左选项卡
+
右选项卡
（兄弟）>然后是孙子视图
专利信息
（对于左选项卡）和
通知
（对于右选项卡）嗯，这与您在原始问题中指出的结构不同。在我给出的例子中，
parent
将是
portfolio.patent
，
leftTab
将是
portfolio.patent.patent.patent.info
和
rightab
将是
portfolio.patent.notifications
。因此，您有一个父
公文包
状态，并且模板包含一个
ui视图
，您的
公文包将加载到该视图中。专利
状态包含左右选项卡集的视图。