Two states in the same view contained in a tab replace the nav tab link


#1

Hello,
I’m facing an issue : I’m using the ionic tabs class. I have various tabs such as customers, contacts, etc.
Each tab contains only an ion-nav-view which name is different for each tab. However, in my contacts tab, I’ve a list of contacts. On click on one item on this list, I want to show the detailed contact. To do this, I have two states, which urls are /contacts for the list of contacts and /contacts/:id for one specific contact.

Both states are loaded in the same view, contained in the tab concerning the contacts. I don’t know if I’m really clear.
So, it works fine, when I click on my contacts tab, I’ve the list of my contacts. And when I click on one of these contacts, I can see it more precisely. And the back button in my header bar is working well.

However, my problem is that the link (meaning when I click on my contacts tab) is replaced : it is to say, when I click first on my contacts list, I see my list of contacts. Then, if I click on one contact, I see the contact. BUT, if from this last view, I click on an another tab such as customers, and I came back to my contacts tab. I see the last view, meaning one contact precisely, instead of all my contacts. It seems that the link behind the nav tabs is replaced, from /contacts to /contacts/0 for example. And i don’t understand why.

Any clue ?


Navigation with tabs buggy in beta 12
#2

@protecta
Can this Issue be similar to: Navigation with tabs buggy in beta 12


#3

Hi,
[edit]: Yes it is the exact same problem.

[update] : Got one hack. Instead of placing a href on my ion-tab (something like <ion-tab class="...." href="/xxx/yyy/zzz">), I’ve replaced href by ng-click="myFunction()". The function “myFunction()” load the good state via $state.go("mystate"). (don’t forget to inject $state in the controller parameters). If you have a better idea, tell me.


#4

ui-sref= is also not working?


#5

Yup, ui-sref isn’t working either.


#6

$state.go(“mystate”) is also not giving back the back button.


#7

It works fine for me. Can you show me your app.js ?


#8

see http://plnkr.co/edit/uDOkeivf77X9PKxzSrdQ?p=preview


#9

It works fine for the friends tab. Are you talking about the home tab ? When clicking on the best friend list card ?


#10

yes, see this sample:

If you click on Best Friend you don’t get a back button.


#11

I think it’s because you don’t go to a child. You go from /tab/dash to /tab/friend/2. That’s why it works fine when you go from /tab/friends to /tab/friends/2 and not from dashboard to friends. Because dashboard and friends are tabs. There isn’t back button when your nav is between tabs.


#12

Yes I know, but this is a normal use case. So I think I have to file a bug. :wink:


#13

I don’t really know if it’s a bug. If I try on my app it works the same way, I tested it via URL and yes it does not provide back button, because I never went through the parent. May be you should add a layer to get the good parent.


#14

It’s also not working if you create an own state for this sub state:

Can you provide a working Plunker


#15

I’ll check this when I go back home. Wait 4 hours please.
[edit] : Ok so here is a working solution : http://plnkr.co/edit/xjMZ2FVoel2SO81Dn9Ix?p=preview
However it’s quite ugly. The clue is to go through the tab.friends state before tab.friends-detail state, because it is the way angular handles it.


#16

@protecta Thanks for you answer, it’s a good & “ugly” workaround. But I’m still the meaning this should be fixed.

see: https://github.com/driftyco/ionic/issues/2240