Angular ui tab with seperate controllers for each tab

Question

I would like to make a bootstrap tabset with each tab having it's own controller. Can anyone point me in which direction I should go.

Currently I have made several difference controllers, which I would like to be used in a tabset instead of having them displayed as a different route.

I know I could fake it by having the tabset in the difference controller templates displaying the given controllers tab as active, but I would like to be able to have a main TabController with several child controllers (for each tab)

Please insert your code what you have done??

The Hungry Dictator
– The Hungry Dictator

2014-01-09 10:42:45 +00:00
Commented Jan 9, 2014 at 10:42 — The Hungry Dictator
– The Hungry Dictator, Commented Jan 9, 2014 at 10:42

Dan · Accepted Answer · 2014-01-09 11:48:16Z

8

If you are using angular ui router you can use nested states to do this.

Create an abstract state with a view that contains the tabs and a nested ui-view
Create a child state for each of your tabs, each inheriting from the abstract state

Each child state can set the content of the nested ui-view, and define a controller

 $stateProvider.state( 'tabs', {
    abstract: true,
        url: 'tabs',
        views: {
          "tabs": {
            controller: 'TabsCtrl',
            templateUrl: 'tabs.html'
          }
        }
      })
      .state('tabs.tab1', {
          url: '',  //make this the default tab
          views: {
          "tabContent": {
            controller: 'Tab1Ctrl',
            templateUrl: 'tab1.html'
          }
        }
      })
      .state('tabs.tab2', {
          url: '/tab2',
          views: {
          "tabContent": {
            controller: 'Tab2Ctrl',
            templateUrl: 'tab2.html'
          }
        }
      });

answered Jan 9, 2014 at 11:48

Dan

3,2682 gold badges24 silver badges38 bronze badges

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

2 Comments

dgorissen Over a year ago

Adding the html would help those not very familiar with the framework

Luke101 Over a year ago

html would be helpful

Maccurt · Accepted Answer · 2017-03-10 20:16:19Z

0

Why don't you put a directive on each tab that has it's own controller? If you are using 1.x. Separate your code out by directive not tabs

answered Mar 10, 2017 at 20:16

Maccurt

14k8 gold badges36 silver badges46 bronze badges

Collectives™ on Stack Overflow

Angular ui tab with seperate controllers for each tab

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related