Programmatically set active tab of ons-tabbar
-
My AngularJS app is using a tabbar design with 3 tabs.
<ons-tabbar position="auto" var="tbrView"> <ons-tab page="tab1.html" label="Tab 1" active></ons-tab> <ons-tab page="tab2.html" label="Tab 2"></ons-tab> <ons-tab page="tab3.html" label="Tab 3"></ons-tab> </ons-tabbar>
It has a configuration settings
ons-page
that allows the user to set the defaultons-tab
to be set active each time the app is started and each time theons-tabbar
on the mainons-page
is opened.// index.js this.defaultTab = '0'; // Can be 0, 1 or 2.
<!-- settings.html --> <ons-list-item tappable> <label class="left"> <ons-radio name="tab1" input-id="tab1" value="0" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(0)"></ons-radio> </label> <label for="tab1" class="center"> Tab 1 </label> </ons-list-item> <ons-list-item tappable> <label class="left"> <ons-radio name="tab2" input-id="tab2" value="1" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(1)"></ons-radio> </label> <label for="tab2" class="center"> Tab 2 </label> </ons-list-item> <ons-list-item tappable> <label class="left"> <ons-radio name="tab3" input-id="tab3" value="2" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(2)"></ons-radio> </label> <label for="tab3" class="center"> Tab 3 </label> </ons-list-item>
Here’s the problem. I do not know where is the right place to get the tab bar to set the right tab.
I have tried the following:
<ons-tabbar position="auto" var="tbrView" ons-show="tbrView.setActiveTab(app.defaultTab)">
This seems to make the tab bar keeps flashing whenever it is visible. Also the underline of the active tab is not rendered properly.
ons-show
is repeatedly triggered as long as the tab bar is visible even when the user is not interacting with it, and the page has loaded fully.<ons-tabbar position="auto" var="tbrView" ons-init="tbrView.setActiveTab(app.defaultTab)">
ons-init
is only run once upon app initialization I believe. Subsequently if I set the setting in the app and return to the page, theons-init
is not fired to switch the tab when the page is reopened.ons-post-change
andons-pre-change
are only triggered if the user tap on another tab, so they are not useful.Where is the right place to set the active tab then?
-
@wetfeet
init
andshow
are page events, not tab events. You are getting those events 3 times at least, once per page inside tabbar. I think you want to do that oninit
event of the tabbar’s parent page. Also, check that the event is fired by that page, not a child page (there is an example here, line 5 of JS).
-
@Fran-Diox said:
@wetfeet
init
andshow
are page events, not tab events.I checked the reference and
ons-tabbar
has these attributes. I thought the events are specific to theons-tabbar
component itself.I believe similarly
ons-page
also has theons-init
,ons-show
,ons-hide
attribute. sourceYou are getting those events 3 times at least, once per page inside tabbar. I think you want to do that on
init
event of the tabbar’s parent page. Also, check that the event is fired by that page, not a child page (there is an example here, line 5 of JS).
-
@wetfeet They are just handlers for page events. This is useful if you want to do the same thing for all the pages inside a tabbar or a navigator, so you don’t need to specify
ons-init
in every single page.
-
@Fran-Diox Hi , I am trying to create my angular js onsen app that it has a navigator and 2 template that first template has got side and other tabbar inside itself . i must say that i am creating dynamic them . i know that addition to navigator there are 2 inner navigation for side and tabbar . so my question is how can i route between ons-pages that exist inside templates . for example i am in settings page in tabbar that it has a button for navigato to home page that exist in side menu content .