angular ui bootstrap tabs component: how to get the content of a tab when the tab is active not clicked

Question

I am using the ui bootstrap 'tabs' component in my angularjs project. It is defined in a file called tab.html. the definition code is as follows :

<uib-tabset class="product-tab-bar">
    <uib-tab ng-repeat="tab in tabs" active="tab.active" ui-sref="{{tab.action}}" disable="tab.disabled" class="product-tab">
        <uib-tab-heading>
            <span class="{{tab.icon}}"></span> {{tab.title}}
        </uib-tab-heading>
        <div ui-view></div>
    </uib-tab>
</uib-tabset>

The tabs are defined in a controller, which are:

.controller('myController', function () {

    $scope.tabs = [
        {title: "tab1", action:".tab1" , icon: "icon-tab1", active: false},
        {title: "tab2", action:".tab2" , icon: "icon-tab2", active: true},
        {title: "tab3", action:".tab3" , icon: "icon-tab3", active: false}
    ]
});

the states definition are:

.state('tab', {
    url: '/tab',
    templateUrl: 'tab.html'
})
.state('tab.tab1', {
    url: '/tab1',
    templateUrl: 'tab1.html',
})
.state('tab.tab2', {
    url: '/tab2',
    templateUrl: 'tab2.html',
})
.state('tab.tab3', {
    url: '/tab3',
    templateUrl: 'tab3.html',
})

When you click the tab, the state will be changed. Now my question is, when I first load the tab.html, the tab 'tab2' is activated, but the content of tab2 is not loaded

you can see as below:

fist load tab2 content

I need to click on 'tab2', and the state will be changed and the content will be loaded

you can see as below:

after click tab2 content

So is there any method when I first load the tab.html, the content of 'tab2' can be loaded or how to active the state of 'tab2' ?

Szabolcs Dézsi · Accepted Answer · 2016-02-21 10:27:29Z

1

You actually have to navigate to the state.

var activeTab;
for(var i = 0; i < $scope.tabs.length; i++) {
    if($scope.tabs[i].active) {
        activeTab = $scope.tabs[i];
        break;
    }
}

if(activeTab) {
    $state.go(activeTab.action);
}

JSFiddle available here.

edited Feb 21, 2016 at 10:27

answered Feb 21, 2016 at 10:22

Szabolcs Dézsi

8,84323 silver badges29 bronze badges

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

1 Comment

ahwyX100 Over a year ago

Thanks for your kind reply. That resolves my problem. And I want to ask one more. As you know when you click different tabs, the state is changed. So when you jump from another page(we can call it pre.html) to tab.html and click the tabs, at this time if you click the back button of the browser, you won't get back to pre.html, just previous tab state of tab.html, so if there any good solution to realize when clicking back button I can go back to pre.html?

Ori Damari · Accepted Answer · 2016-02-21 10:18:25Z

0

That's because you change the state only on click (ui-sref="...")

So in the first time the tab is active but the ui-view don't change.

One quick solution for example is to $state.go to the active tab on first load.

answered Feb 21, 2016 at 10:18

Ori Damari

515 bronze badges

Comments

faiyaz syed · Accepted Answer · 2016-02-21 10:18:55Z

0

Use $state.go('the-state-name-in-quotes') method to trigger appropriate state and load content. Add this method in your controller.

Below documentation have more details

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options

answered Feb 21, 2016 at 10:18

faiyaz syed

442 bronze badges

Collectives™ on Stack Overflow

angular ui bootstrap tabs component: how to get the content of a tab when the tab is active not clicked

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related