How to open page with ons-tabbar, and display specific tab

Question

How to open page with ons-tabbar, and display specific tab

3.2k Views Asked by Guillermo Gutiérrez At 04 April 2025 at 19:12

How can I open a page, which contains an ons-tabbar inside, and tell it to show a specific tab, using ons-navigator? I have a menu with some buttons, and depending which one is pushed, it has to be displayed the tabbar page, with a specific tab active.

This is what I have tried so far:

index.html (Main page)

<body>
  <ons-navigator animation="slide" var="app.navi">
    <ons-page>
      <ons-toolbar>
        <div class="center">Inicio</div>
      </ons-toolbar>
      <div>
        <p style="text-align: center">
          <ons-button modifier="large" ng-click="app.navi.pushPage('tabs.html', {params: { tab: 0 }});">OPEN TAB 0</ons-button>
        </p>
        <p style="text-align: center">
          <ons-button modifier="large" ng-click="app.navi.pushPage('tabs.html', {params: {tab: 1}});">OPEN TAB 1</ons-button>
        </p>
      </div>
    </ons-page>
  </ons-navigator>
</body>

tabs.html

<div ng-controller="TabsCtrl">
  <ons-tabbar var="tabbar" position="top">
    <ons-tabbar-item
        icon="home"
        label="Home"
        page="page0.html"></ons-tabbar-item>
    <ons-tabbar-item
        icon="comment"
        label="Comments"
        page="page1.html"></ons-tabbar-item>
  </ons-tabbar>
</div>

AngularJS controller:

angular.module('myControllers', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
  // Trying to set active tab on the controller
  $scope.tabbar.setActiveTab($scope.ons.navigator.getCurrentPage().options.params.tab);
}]);

However, when I push a buton in the main page, the debugger says that cannot call method setActiveTab on undefined. I know that this may be because the tabbar hasn't been created when the controller is executed, but I can't figure out how to show a specific tab when the page is displayed, based on some navigator parameter.

Original Q&A

There are 1 best solutions below

**Andreas Argelius** · Accepted Answer

Yeah it's true that when the controller is executed there won't be any tabbar object, but it will be created immediately after.

So you could use setImmediate(fn) in the controller to call setActiveIndex(idx).

Example:

angular.module('app', ['onsen'])

.controller('TabsController', function() {
  setImmediate(function() {
    var tabIndex = app.navi.getCurrentPage().options.params.tab;
    app.tabbar.setActiveTab(tabIndex);
  });
});

Pen: http://codepen.io/argelius/pen/XJryPM

Actually, in 1.2.0 there is an 'ons-tabbar:init' DOM event that you could listen to which is probably better to use. The event object will attach the tabbar object so you could do something like:

someElement.addEventListener('ons-tabbar:init', function(event) {
  var tabBar = event.component;
  tabBar.setActiveTab(someIndex);
});

How to open page with ons-tabbar, and display specific tab

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in ONSEN-UI

Trending Questions

Popular # Hahtags

Popular Questions