Search
  • Clearly Innovative

Ionic Framework Tabs: Go to Home View




Working with tabs in the Ionic Framework is amazing what cane be accomplished with the use of the angular directives and the javascript provided, this is why I think it is such a great platform.

The way  the tabs are implemented in Ionic Framework is that each tab maintains its state and history independent of the other tabs, meaning when you leave the tab and then return, if you navigated to a child view in tab-1 before going to tab-2, that you will still be on the child view when returning to tab-1. Sometimes that is the desired behavior, sometimes it is not.


Check Out Ionic Framework Videos Here


The solution to the problem  I created, will set the state back to  the top of the tabs view stack whenever the tab is selected. I accomplished this by setting the 

on-select

I then created a top-level controller that wraps all other controllers in the application.

This toplevel controller is set on the 


 tag on the page so that we can now have nested controllers. Notice how when I specify the controller, I am using the controller as syntax.


This controller 


 will hold the callback functions; see the code snippet below showing the user of the Main controller handling the callbacks.


then what we do in the controller is to check if the title of the tab is the “Home” tab, if so transition to the top-level of that tab by calling 


<< Click Here For All Articles on Ionic Framework >>

Here is the complete sample application running with CodePen




3 views

Be a Socialite and  Follow Us:

  • White Facebook Icon
  • White Twitter Icon
  • White Instagram Icon