角度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