从模板启动多个命名视图

Question

我正在使用ui-router并创建了一个具有多个子状态的父状态，如下所示：

.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-view中加载内容，而不是在左侧tabset中加载patent-info，并在右侧tabset中加载notifications。

题

如果我将ui-views调整为<div ui-view="leftTab>和<div ui-view="rightTab">，我会使用ui-sref的语法来执行此操作？

例如：data-ui-sref="@righTab.notifications"（我知道这不正确）

Answer 1

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

angular.module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('parent', {
        url: '/',
        views: {
          'leftTab': {
            template: '<div>This is the left tab</div>'
          },
          'rightTab': {
            template: '<div>This is the right tab</div>'
          }
        }
      });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.22/angular-ui-router.js"></script>
<div ng-app="app">
  <div ui-view>
    <div style="width: 40%; float: left; border: 1px solid black; margin-right: 5px;">
      <div ui-view="leftTab"></div>
    </div>
    <div style="width: 40%; float: left; border: 1px solid black; margin-left: 5px;">
      <div ui-view="rightTab"></div>
    </div>
  </div>
</div>