Ionic Navigation between tabs and not

ionic-v1
1

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.

2

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.

3

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!)

4

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

5

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

6

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 :blush:

2 Likes
7

I think you’re right @bodinaren :smile: 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 :stuck_out_tongue: and that’s confusing. Well just my $0.02 :wink: