从模板

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和右侧patent-info两者中加载内容，而不是notifications左侧标签集，并在右侧标签集中加载<div ui-view="leftTab>。

问题

如果我将用户界面视图调整为<div ui-view="rightTab">和ui-sref，data-ui-sref="@righTab.notifications"会使用哪种语法？

例如：CellClick（我知道那是不正确的）

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>