# Ionic Navigation between tabs and not

**URL:** <https://forum.ionicframework.com/t/ionic-navigation-between-tabs-and-not/25969>\
**Category:** ionic-v1\
**Created:** [June 8, 2015, 9:03am UTC](https://forum.ionicframework.com/t/ionic-navigation-between-tabs-and-not/25969 "2015-06-08T09:03:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![uncuscino](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/uncuscino/32/12959_2.png) [@uncuscino](https://forum.ionicframework.com/u/uncuscino)\
**Post date:** [June 8, 2015, 9:03am UTC](https://forum.ionicframework.com/t/ionic-navigation-between-tabs-and-not/25969/1 "2015-06-08T09:03:17Z")

</div>

Hello,  
I’ve got a problem with the navigation in my app.  
I’ve got an app where in homepage you have a list of people (with a unique identifier - uid) and if you click on a person you are forwarded in the chat-detail with that uid (so in the page where you can chat with the person), skipping the “tab-chat” tab (it’s a tab where you have a list of chats you opened like the “homepage” of whatsapp, with the list of the chats and if you click on a chat you go into the chat with that person).  
The navigation problem there isn’t if I go in the chat-detail from the tab-chat, as it should do… But the problem is that I want when you go in the chat-detail from the homepage, you have to go back -not in homepage- in the tab-chats…  
Is that possible? Because if I click in the button from the homepage it goes in the chat-detail, but nothing appear to come back… neither to go back in the homepage.  
How to do what I want? I really don’t know what to do.  
Here’s the app.js code for the views…

```
        .state('tab.home', {
    url: '/home',
    views: {
        'tab-home': {
            templateUrl: 'templates/tab-home.html',
            controller: 'HomeCtrl'
        }
    }
})

    .state('tab.chats', {
    cache: false,
    url: '/chats',
    views: {
        'tab-chats': {
            templateUrl: 'templates/tab-chats.html',
            controller: 'ChatsCtrl'
        }
    }
})
    .state('tab.chat-detail', {
    cache: false,
    url: '/chats/:chatId',
    views: {
        'tab-chats': {
            templateUrl: 'templates/chat-detail.html',
            controller: 'ChatDetailCtrl'
        }
    }
})

```

Thanks.

---

<div class="post-metadata">

**Author:** ![bodinaren](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bodinaren/32/12602_2.png) [@bodinaren](https://forum.ionicframework.com/u/bodinaren)\
**Post date:** [June 8, 2015, 10:20am UTC](https://forum.ionicframework.com/t/ionic-navigation-between-tabs-and-not/25969/2 "2015-06-08T10:20:01Z")

</div>

The easiest way if you wanna keep your navigation history is to hide the tabs with the class `.tabs-item-hide` on your `<ion-tabs>`. So just use ng-class to set it when appropriate.

---

<div class="post-metadata">

**Author:** ![uncuscino](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/uncuscino/32/12959_2.png) [@uncuscino](https://forum.ionicframework.com/u/uncuscino)\
**Post date:** [June 8, 2015, 10:55am UTC](https://forum.ionicframework.com/t/ionic-navigation-between-tabs-and-not/25969/3 "2015-06-08T10:55:01Z")

</div>

Thanks you for your reply!  
So I just need to put a ng-class in the navbar to show the back button if the previous state is tab-home?

(for the tabs they are already hidden in the chat-detail, but thank you!)

---

<div class="post-metadata">

**Author:** ![bodinaren](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bodinaren/32/12602_2.png) [@bodinaren](https://forum.ionicframework.com/u/bodinaren)\
**Post date:** [June 8, 2015, 11:20am UTC](https://forum.ionicframework.com/t/ionic-navigation-between-tabs-and-not/25969/4 "2015-06-08T11:20:21Z")

</div>

I misunderstood your problem, sorry. I’m not sure how to solve that.

---

<div class="post-metadata">

**Author:** ![nuba](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nuba/32/82111_2.png) [@nuba](https://forum.ionicframework.com/u/nuba)\
**Post date:** [June 8, 2015, 1:05pm UTC](https://forum.ionicframework.com/t/ionic-navigation-between-tabs-and-not/25969/5 "2015-06-08T13:05:25Z")

</div>

If you want to toggle classes based on the current state, check this method in ui-router’s $state:

> includes(stateOrName, params, options)  
> A method to determine if the current active state is equal to or is the child of the state stateName. If any params are passed then they will be tested for a match as well. Not all the parameters need to be passed, just the ones you’d like to test for equality.

Full documentation on [http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state](http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state)

---

<div class="post-metadata">

**Author:** ![bodinaren](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bodinaren/32/12602_2.png) [@bodinaren](https://forum.ionicframework.com/u/bodinaren)\
**Post date:** [June 8, 2015, 1:08pm UTC](https://forum.ionicframework.com/t/ionic-navigation-between-tabs-and-not/25969/6 "2015-06-08T13:08:28Z")

</div>

I believe what he wants to achieve is that when you go from tab.home directly to tab.chat-detail, then when you click back he wants to arrive at tab.chats instead of back at tab.home. Otherwise I misunderstood twice 😊

---

<div class="post-metadata">

**Author:** ![nuba](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nuba/32/82111_2.png) [@nuba](https://forum.ionicframework.com/u/nuba)\
**Post date:** [June 8, 2015, 1:42pm UTC](https://forum.ionicframework.com/t/ionic-navigation-between-tabs-and-not/25969/7 "2015-06-08T13:42:03Z")

</div>

I think you’re right @bodinaren 😄 makes sense.

In that case @uncuscino be aware that Ionic’ll keep state for each view. If your’re _deep linking_ to the chat details, if it’s the first time you’re using that view then there won’t be a “previous state” to go back to.

Implementation details aside, I’d suggest sticking to a simple “up in the hierarchy” navigation (from chat details to the chat list) and not worrying with that view’s history. With deep links the “back” navigation won’t always be there 😛 and that’s confusing. Well just my $0.02 😉
