Question

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

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

这是我的状态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'
    }
  }
})

Answer 2

设置选项卡标题可启用链接，但如果您单击选项卡但在链接外部，则链接将不会激活。这是我从ui-router得到的回复。感谢Chris T。

ui-router

plunkr

    <tabset>
    <tab ui-sref="user.list">
        <tab-heading><a ui-sref-active="active">Users</a></tab-heading>
    </tab> 
    </tabset>

更新：

由于ui-sref-active，我对这个问题非常喜欢。从ui-router.2.10.2.11 / angular-ui-router.js开始，这被加强以支持继承 - 请参阅stack overflow帖子和ui-router issue 18

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

2 个答案: