Инициировать несколько именованных представлений из шаблона

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" (я знаю, что это неправильно)

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>