Hi all,
Finally hit a snag (smooth sailing so far). I have tabs at the bottom (global), and tabs at the top (sometimes).
This is in my tabs.html
<ion-view>
<ion-tabs>
<ion-tab title="Tab One" href="#/tab/tab-one">
<ion-nav-view name="tab-one"></ion-nav-view>
</ion-tab>
<ion-tab class="Tab Two" title="Tab Two" href="#/tab/tab-two">
<ion-nav-view name="tab-two"></ion-nav-view>
</ion-tab>
<ion-tab class="Tab Three" title="Tab Three" href="#/tab/tab-three">
<ion-nav-view name="tab-three"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
My Config (app.config.js)
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'app/layout/tabs.html'
})
The states look similar for the 3 globals. Much like the tabs example.
So this all works fine, I have different states (tabs.one, tabs.two, tabs.three) for these global tabs. Controllers are fired, services injected, etc. Life is good.
The problem
In tab2 I wanted to have another set of tabs along the top. So Inside my tab2.html I added:
<ion-view view-title="Inside Tabs (top)" animation="slide-left-right" hide-nav-bar="true">
<ion-tabs id="inside-tabs" delegate-handle="inside-tabs">
<ion-tab title="Tab A" ng-click="InsideTabA()">
<ion-content padding="true">
</ion-content>
</ion-tab>
<ion-tab title="Tab B" ng-click="InsideTabB()">
<ion-content padding="true">
</ion-content>
</ion-tab>
<ion-tab title="Tab C" ng-click="InsideTabC()">
<ion-content padding="false">
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
As you can see I have 3 ng-click functions for each tab. I wanted to control the tabs manually, so I’m doing something like this in my controller. I am also putting the content directly into the view, I couldn’t figure out how to have them seperated into their own controllers. But here is what updates the bindings and selects the appropriate tab on click.
$scope.InsideTabA= function () {
var insidetab = $ionicTabsDelegate.$getByHandle(‘inside-tabs’);
insidetab.select(0); //select first tab
//data stuff
}
This all seems to work… Finally, on Tab 2 -> Tab A has a list of objects… When the user clicks on it, I am trying to navigate to a 3rd view with tabs specifically to the object. The tabs are Details, Stats, Info
So
Tab 1 -> Tab A -> View Object (3 tabs)
It kind of works… When I click on the link to View The Object (#/tab/view-activity/12345), it animates to the View (with Details, Stats, Info), then quickly animates back (to Tab A). When I click to View That Object again it navigates back to it properly and stays. Leads me to believe multiple events are being fired, but I don’t understand where or how… There’s no way to trace it.
I’ve tried so many permutations of my state definition… Here’s all of them currently
Does the order of .state defintions matter? is it somehow being cought up on it? The state def looks like this for that 3rd view
.state(‘tabs.view-activity’, {
url: ‘/view-activity/:activityId’,
views: {
‘tab-one’: { // This is confusing me at this point, but I have it still pointing at the very top most tab.
templateUrl: ‘app/wellness/view-activity-detail.html’,
controller: ‘ViewActivityCtrl’
}
}
})
Any suggestions on how to debug, or things to try? Is it even worth using 3 ion-tabs here, should I just roll my own tabs for the inside? ionic seems to really struggle with nested tabs, especially when trying to get the animations, and other aspects to jive properly.
Sorry for the length, and thank you to the soul that attempts to read this lol 
PS I’m fine with conceptual answers or small code examples, just out of things to try at this point.