Angular ui-bootstrap选项卡不呈现ui-view

Question

我正在将现有的角度应用程序升级到所有最新版本的angular(v1.2.13),ui-router(v0.2.8)和ui-bootstrap(v0.10.0).

我有嵌套的视图,有多个命名视图.其中一个命名视图中包含选项卡.我曾经能够ui-views在每个标签内设置,但不再有效.如果我不使用选项卡,则命名视图将正确呈现.

我已经创建了一个plunkr来展示我所看到的.

这是我的状态configuraiton._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-view？

Answer 1

是的,你可以在标签内渲染ui-views.诀窍是使用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-router config)

$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'
    }
  }
})