Angular ui-bootstrap tabs not rendering ui-view

Question

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?

Answer 1

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

Answer 2

Setting the tab-heading enables the links, but if you click in the tab but outside the link, the link will not activiate. Here is the response I got from ui-router. Thanks to Chris T.

ui-router

plunkr

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

Update:

I was having issues deep liking with this, due to ui-sref-active. As of ui-router.2.10.2.11/angular-ui-router.js this was enhanced to support inheritance - see stack overflow post and ui-router issue 18