Angular ui-bootstrap 选项卡不呈现 ui-view [英] Angular ui-bootstrap tabs not rendering ui-view

查看：23
本文介绍了Angular ui-bootstrap 选项卡不呈现 ui-view的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在将现有的 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", {摘要:真实，网址:/foo"，templateUrl: '_split.html',}).state("foo.view", {摘要:真实，网址:'',意见:{'最佳': {模板:'_tabs.html'},'中间': {templateUrl: '_tabs2.html'},'底部': {模板:'<h2>底部</h2>'}},}).state("foo.view.tabs", {网址:'',意见:{'剩下': {模板:'<h3>左</h3>'},'对': {模板:'<h3>右</h3>'}}})

有没有办法在标签中呈现 ui-view?

解决方案

是的，您可以在选项卡中呈现 ui 视图.诀窍是在 中使用 ui-sref 来控制状态/路由变化，并拥有 ui-view在 下方.我确定还有其他方法，但这就是我让标签与 ui-router 一起工作的方式.

<块引用>

编辑更新

以上原建议是错误的，ui-sref应该在

提示 chris-t 以获得正确的配置.

工作多视图演示 http://plnkr.co/edit/gXnFS3?p=preview

index.html

<tab ui-sref="left"><tab-heading style="cursor:pointer;"><a ui-sref-active="active">左</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"><!--这里是A内容-->

<div class="col-xs-4"><div class="well" ui-view="viewB"><!--这里是B内容-->

app.js (ui-router 配置)

$stateProvider.state('左', {网址:/"，意见:{视图A":{模板:左标签，index.viewA"},视图B":{模板:'左标签，index.viewB<br><a ui-sref=".list">显示列表</a>'+'<div ui-view="viewB.list"></div>'},视图C":{模板:'左标签，index.viewC

I am upgrading an existing angular app to all the latest versions of angular (v1.2.13), ui-router (v0.2.8), and ui-bootstrap (v0.10.0).

I have nested views that have multiple named views. One of the named views has tabs inside of it. I used to be able to set ui-views within each tab, but that no longer is working. If I don't use the tabs then the named views render correctly.

I have created a plunkr to show what I'm seeing.

Here is my state configuraiton. _split.html has 3 named views: TOP, MIDDLE, and BOTTOM. TOP and MIDDLE both have named views LEFT and RIGHT. TOP has tabs and does not render the views LEFT or RIGHT. MIDDLE has the same named views and they render correctly.

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

Is there any way to render ui-view within tabs?

解决方案

Yeah, you can render ui-views within tabs. The trick is to use ui-sref in <tab-heading> to control the state/route change, and have the ui-view below the </tabset>. I'm sure there are other ways, but thats how I got tabs working with ui-router.

edit update

Above original suggestion is wrong, ui-sref should be in <tab>

Hat tip to chris-t for correct config.

Working multiple views demo 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'
    }
  }
})

这篇关于Angular ui-bootstrap 选项卡不呈现 ui-view的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆