Ionic Framework Tabs: Go to Home View - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development

 

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 callback handler, as specified in the Ionic Framework Documentation, of the specific tab that I want to manage

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

This toplevel controller is set on the body 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 MainCtrl 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 $state.go().

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

Here is the complete sample application running with CodePen


&lt;html ng-app=&quot;ionicApp&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width&quot;&gt;

&lt;title&gt;Tabs Example&lt;/title&gt;

&lt;link href=&quot;http://code.ionicframework.com/1.0.0-beta.8/css/ionic.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;http://code.ionicframework.com/1.0.0-beta.8/js/ionic.bundle.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body ng-controller=&quot;MainCtrl as main&quot;&gt;

&lt;ion-nav-bar class=&quot;nav-title-slide-ios7 bar-positive&quot;&gt;
&lt;ion-nav-back-button class=&quot;button-icon ion-arrow-left-c&quot;&gt;
&lt;/ion-nav-back-button&gt;
&lt;/ion-nav-bar&gt;

&lt;ion-nav-view animation=&quot;slide-left-right&quot;&gt;&lt;/ion-nav-view&gt;
&lt;script id=&quot;tabs.html&quot; type=&quot;text/ng-template&quot;&gt;
&lt;ion-tabs class=&quot;tabs-icon-top tabs-positive&quot;&gt;

&lt;ion-tab title=&quot;Home&quot; icon=&quot;ion-home&quot;
href=&quot;#/tab/home&quot;
on-select=&quot;main.onTabSelected(this)&quot;
on-deselect=&quot;main.onTabDeselected(this)&quot;&gt;
&lt;ion-nav-view name=&quot;home-tab&quot;&gt;&lt;/ion-nav-view&gt;
&lt;/ion-tab&gt;

&lt;ion-tab title=&quot;About&quot; icon=&quot;ion-ios7-information&quot;
href=&quot;#/tab/about&quot;&gt;
&lt;ion-nav-view name=&quot;about-tab&quot;&gt;&lt;/ion-nav-view&gt;
&lt;/ion-tab&gt;

&lt;ion-tab title=&quot;Contact&quot; icon=&quot;ion-ios7-world&quot;
ui-sref=&quot;tabs.contact&quot;&gt;
&lt;ion-nav-view name=&quot;contact-tab&quot;&gt;&lt;/ion-nav-view&gt;
&lt;/ion-tab&gt;

&lt;/ion-tabs&gt;
&lt;/script&gt;

&lt;script id=&quot;home.html&quot; type=&quot;text/ng-template&quot;&gt;
&lt;ion-view title=&quot;Home&quot;&gt;
&lt;ion-content class=&quot;padding&quot;&gt;
&lt;p&gt;Example of Ionic tabs. Navigate to each tab, and
navigate to child views of each tab and notice how
each tab has its own navigation history.&lt;/p&gt;
&lt;p&gt;
&lt;a class=&quot;button icon icon-right ion-chevron-right&quot; href=&quot;#/tab/facts&quot;&gt;Scientific Facts&lt;/a&gt;
&lt;/p&gt;
&lt;/ion-content&gt;
&lt;/ion-view&gt;
&lt;/script&gt;

&lt;script id=&quot;facts.html&quot; type=&quot;text/ng-template&quot;&gt;
&lt;ion-view title=&quot;Facts&quot; class=&quot;padding&quot;&gt;
&lt;ion-content&gt;
&lt;p&gt;Banging your head against a wall uses 150 calories an hour.&lt;/p&gt;
&lt;p&gt;Dogs have four toes on their hind feet, and five on their front feet.&lt;/p&gt;
&lt;p&gt;The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.&lt;/p&gt;
&lt;p&gt;A cockroach will live nine days without it&#x27;s head, before it starves to death.&lt;/p&gt;
&lt;p&gt;Polar bears are left handed.&lt;/p&gt;
&lt;p&gt;
&lt;a class=&quot;button icon ion-home&quot; href=&quot;#/tab/home&quot;&gt; Home&lt;/a&gt;
&lt;a class=&quot;button icon icon-right ion-chevron-right&quot; href=&quot;#/tab/facts2&quot;&gt;More Facts&lt;/a&gt;
&lt;/p&gt;
&lt;/ion-content&gt;
&lt;/ion-view&gt;
&lt;/script&gt;

&lt;script id=&quot;facts2.html&quot; type=&quot;text/ng-template&quot;&gt;
&lt;ion-view title=&quot;Also Factual&quot;&gt;
&lt;ion-content class=&quot;padding&quot;&gt;
&lt;p&gt;111,111,111 x 111,111,111 = 12,345,678,987,654,321&lt;/p&gt;
&lt;p&gt;1 in every 4 Americans has appeared on T.V.&lt;/p&gt;
&lt;p&gt;11% of the world is left-handed.&lt;/p&gt;
&lt;p&gt;1 in 8 Americans has worked at a McDonalds restaurant.&lt;/p&gt;
&lt;p&gt;$283,200 is the absolute highest amount of money you can win on Jeopardy.&lt;/p&gt;
&lt;p&gt;101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don&#x27;t die throughout the movie.&lt;/p&gt;
&lt;p&gt;
&lt;a class=&quot;button icon ion-home&quot; href=&quot;#/tab/home&quot;&gt; Home&lt;/a&gt;
&lt;a class=&quot;button icon ion-chevron-left&quot; href=&quot;#/tab/facts&quot;&gt; Scientific Facts&lt;/a&gt;
&lt;/p&gt;
&lt;/ion-content&gt;
&lt;/ion-view&gt;
&lt;/script&gt;

&lt;script id=&quot;about.html&quot; type=&quot;text/ng-template&quot;&gt;
&lt;ion-view title=&quot;About&quot;&gt;
&lt;ion-content class=&quot;padding&quot;&gt;
&lt;h3&gt;Create hybrid mobile apps with the web technologies you love.&lt;/h3&gt;
&lt;p&gt;Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.&lt;/p&gt;
&lt;p&gt;Built with Sass and optimized for AngularJS.&lt;/p&gt;
&lt;p&gt;
&lt;a class=&quot;button icon icon-right ion-chevron-right&quot; href=&quot;#/tab/navstack&quot;&gt;Tabs Nav Stack&lt;/a&gt;
&lt;/p&gt;
&lt;/ion-content&gt;
&lt;/ion-view&gt;
&lt;/script&gt;

&lt;script id=&quot;nav-stack.html&quot; type=&quot;text/ng-template&quot;&gt;
&lt;ion-view title=&quot;Tab Nav Stack&quot;&gt;
&lt;ion-content class=&quot;padding&quot;&gt;
&lt;p&gt;&lt;img src=&quot;http://ionicframework.com/img/diagrams/tabs-nav-stack.png&quot; style=&quot;width:100%&quot;&gt;&lt;/p&gt;
&lt;/ion-content&gt;
&lt;/ion-view&gt;
&lt;/script&gt;

&lt;script id=&quot;contact.html&quot; type=&quot;text/ng-template&quot;&gt;
&lt;ion-view title=&quot;Contact&quot;&gt;
&lt;ion-content&gt;
&lt;p&gt;@IonicFramework&lt;/p&gt;
&lt;p&gt;@DriftyCo&lt;/p&gt;
&lt;/ion-content&gt;
&lt;/ion-view&gt;
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

See the Pen <a href=’http://codepen.io/aaronksaunders/pen/rlvFq/’>Tabs: Go to top of stack when clicking Tab</a> by aaron k saunders (<a href=’http://codepen.io/aaronksaunders’>@aaronksaunders</a>) on <a href=’http://codepen.io’>CodePen</a>.

 

See Complete Source Code In GitHub Repo