top of page
  • Writer's pictureClearly 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.

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 


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 

Here is the complete sample application running with CodePen

17 views0 comments


bottom of page