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?

It works good with v0.2.7 (ui-router). I have this problem only with v0.2.8. Maybe it's a bug? — ekstro
– ekstro, Commented Mar 5, 2014 at 9:36
Confirmed: Something has changed between v0.2.7 and v0.2.8 to break this. In my case, rolling back to v0.2.7 resolved the issue. — Brent
– Brent, Commented Mar 6, 2014 at 17:06

Community · Accepted Answer · 2017-05-23 12:13:59Z

9

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

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Feb 20, 2014 at 2:34

cheekybastard

5,7553 gold badges25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mark Meyer Over a year ago

I was able to get a working version using this method so thanks. I previously was able to have both tabs already loaded so that switching between them was basically instant. Is there a way to do that?

cheekybastard Over a year ago

Yeah, have a look @ how github.com/ngbp/ngbp build system works, .html templates are injected into the DOM on app load, compiled by grunt. From the README.md: delta:tpls - When any *.tpl.html file within src/ changes, all templates are put into strings in a JavaScript file (technically two, one for src/common/ and another for src/app/) that will add the template to AngularJS's $templateCache so template files are part of the initial JavaScript payload and do not require any future XHR. The template cache files are build/template-app.js and build/template-common.js.

Stephane Over a year ago

@cheekybastard Is it that you have to click on the link inside the tab header ? In my case, clicking on the square tab header changes the current tab but does not click on the link and therefore does not change the state.

cheekybastard Over a year ago

Yes its a link driving the state change. The link contains a ui-router directive ui-sref with the ui-router state to call. You can use ng-click to call state change by clicking anywhere on tab header.

orange Over a year ago

@cheekybastard: Does this ng-click suggestion work for you? I did <tab-heading ng-click="switchTab($index)">' and use $state.go() in switchTab(), but I still need to click on the actual text to get a transition to the other tab.

|

Community · Accepted Answer · 2017-05-23 11:51:21Z

3

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

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Apr 14, 2014 at 18:52

Maui Doug

1081 silver badge9 bronze badges

2 Comments

Christian Bonato Over a year ago

This should be turned into a self-answered question on StackOverflow. It is a crucial example for ui-router beginners/intermediate users on how to set states.js to have tabs visually separated from the tabs contents. IMHO one of the best plunkers about ui-router in conjunction with ui-bootstrap.

Stephane Over a year ago

Just seeing it now, right after I commented above. Rule I forgot: Always read the entire page on SO before commenting.

Collectives™ on Stack Overflow

Angular ui-bootstrap tabs not rendering ui-view

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related