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

Question

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

我有嵌套视图具有多个命名视图。其中一个命名视图在其中包含选项卡。我曾经可以在每个标签中设置ui-views，但不再有效。如果我不使用选项卡，那么命名视图将正确呈现。

我创建了一个plunkr to show what I'm seeing.

这是我的状态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的看法？

Answer 1

是的，你可以在选项卡中呈现UI视图。诀窍是在<tab-heading>中使用ui-sref来控制状态/路由更改，并使ui-view低于</tabset>。我相信还有其他的方式，但那是我如何得到与UI路由器的标签。

编辑更新

以上原来的建议是错误的，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' 
    } 
    } 
}) 

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-S REF-活跃。从ui-router.2.10.2.11/angular-ui-router.js开始支持继承 - 参见stack overflow post和ui-router issue 18