角度ui-bootstrap选项卡不呈现ui-view

Question

我将现有的angular应用程序升级到angular（v1.2.13），ui-router（v0.2.8）和ui-
bootstrap（v0.10.0）的所有最新版本。

我有具有多个命名视图的嵌套视图。其中一个命名视图内部具有选项卡。我以前可以ui- views在每个标签中进行设置，但现在不再起作用。如果我不使用选项卡，则命名视图将正确呈现。

我创建了一个plunkr以显示我所看到的。

这是我的状态配置。_split.html有3个命名视图：TOP，MIDDLE，和BOTTOM。
TOP并MIDDLE都命名了视图LEFT和RIGHT。
TOP有标签且不呈现视图LEFT或RIGHT。MIDDLE具有相同的命名视图，并且它们可以正确呈现。

  $stateProvider
      .state("foo", {
        abstract: true,
          url: "/foo",
          templateUrl: '_split.html',
      })
      .state("foo.view", {
        abstract: true,
        url: '',
        views: {
          'TOP': {
            template: '_tabs.html'
          },
          'MIDDLE': {
             templateUrl: '_tabs2.html'
          },
          'BOTTOM': {
            template: '<h2>Bottom</h2>'
          }
        },
      })
      .state("foo.view.tabs", {
        url: '',
        views: {
          'LEFT': {
            template: '<h3>Left</h3>'
          },
          'RIGHT': {
            template: '<h3>Right</h3>'
          }
        }
      })

有什么办法可以在标签内呈现ui视图？

Answer 1

是的，您可以在标签内呈现ui视图。诀窍是使用ui-sref在<tab-heading>控制状态/路由变化，并具有ui-view以下</tabset>。我敢肯定还有其他方法，但这就是我如何使用ui-router制作选项卡的方法。

编辑更新

以上原始建议是错误的，ui-sref应在<tab>

对chris-t的帽子提示，以进行正确的配置。

使用多个视图演示http://plnkr.co/edit/gXnFS3?p=preview

index.html

<tabset>
  <tab ui-sref="left">
    <tab-heading style="cursor:pointer;">
      <a ui-sref-active="active">Left</a>
    </tab-heading>
  </tab>
  <tab ui-sref="right">
    <tab-heading style="cursor:pointer;">
      <a ui-sref-active="active">Right</a>
    </tab-heading>
  </tab>
</tabset>
<div class="row">
  <br>
  <div class="col-xs-4">
    <div class="well" ui-view="viewA">
      <!--Here is the A content-->
    </div>
  </div>
  <div class="col-xs-4">
    <div class="well" ui-view="viewB">
      <!--Here is the B content-->
    </div>
  </div>
</div>

app.js（UI路由器配置）

$stateProvider
.state('left', {
  url: "/",
  views: {
    "viewA": {
      template: "Left Tab, index.viewA"
    },
    "viewB": {
      template: 'Left Tab, index.viewB<br><a ui-sref=".list">Show List</a>' +
                '<div ui-view="viewB.list"></div>'
    },
    "viewC": {
      template: 'Left Tab, index.viewC <div ui-view="viewC.list"></div>'
    }
  }
})
.state('left.list', {
  url: 'list',
  views: {
    "viewB.list": {
      template: '<h2>Nest list viewB</h2><ul>' +
                '<li ng-repeat="thing in tab1things">{{thing}}</li></ul>',
      controller: 'Tab1ViewBCtrl',
      data: {}
    },
    "viewC.list": {
      template: 'Left Tab, list.viewC'
    }
  }
})