角UI的引导标签不渲染用户界面视图 [英] Angular ui-bootstrap tabs not rendering ui-view

问题描述

我升级现有角应用角度（v1.2.13）的所有最新版本，UI的路由器（v0.2.8），和UI自举（v0.10.0）。

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).

我有嵌套有多个命名视图的看法。其中一个命名视图拥有它里面的标签。我曾经可以设置每个选项卡中的 UI的意见，但不再是工作。如果我不使用的选项卡，然后命名的观点正确呈现。

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.

我创建了一个 plunkr展现我所看到的。

下面是我的状态configuraiton。 _split.html 有3个命名视图： TOP ，中东和 BOTTOM 。 TOP 和中东双方都命名视图左和右。 TOP 有标签，不渲染视图左或右。 中东具有相同的命名视图，它们被正确渲染。

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

有什么办法来渲染选项卡中UI的看法？

推荐答案

是的，你可以渲染选项卡中UI的意见。诀窍是使用 UI-SREF 在＆LT;制表标题＆GT; 来控制国家/路由变化，有用户界面视图下的＆LT; /标签集＆GT; 。我敢肯定还有其他的方法，但多数民众赞成我是如何得到卡口与UI的路由器工作。

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.

修改更新

以上原来的建议是错误的， UI-SREF 应该在＆LT;标签＆gt;

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

帽尖正确配置克里斯-T 。

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

index.html的

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路由器配置）

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

这篇关于角UI的引导标签不渲染用户界面视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！