Same State for different App Tabbar sections


#1

Hi there,

First time posting here. Hope to be able to explain my problem :slight_smile:

I have a state that I would like to use in different parts of my App.

//LOGIN
.state('login', {
  url: '/login/:itemId',
  views: {
    'tab-items': {
      templateUrl: 'templates/login.html'
    }
  }
}) 

At a first view it looks simple but I want two things:

  1. Mantain my active tab bar section
  2. Be able to have navigation (scroll to the right and be able to come back easily)

Right now my only solution has been to duplicate the state changing the name, url and view but I guess thats totally wrong… I guess.

So… How could I achieve this?


#2

Looking for a solution to this too… I have just duplicated states across my application and reused the template and controllers


#3

Your best bet is to put up a simple CodePen sample that shows what you are currently doing to deal with the duplicated state. Then, we can see if there is a way to “share” it.


#4

i will put something together, but it is a common pattern, which is why I am certain I am just missing something in the tabs documentation

Tab with List View of Cars -> Cars Detail View
Tab with Favorites View of Cars-> Cars Detail View

How do I not duplicated the Cars Detail State


#5

Hi Calendee,

Thanks for your interest. I’ve created an example here:


#6

thx for putting the pen together, this is the same pattern I am trying to replace


#7

My first thought was that this should be “easy”. I just linked to the “facts” view from within the “abouts” view.

Unfortunately, you lose the navigation stack because you are aren’t linking to something who’s view target is the home-tab.

I don’t really see anyway around this. The “views” property in the state tells it which <ion-nav-view> to render into. You have to tell it something.

I’m afraid that duplicating a state might be the only way to go. @mhartington do you any any suggestions on this?


#8

@NeoGeneration, I’m afraid @Calendee is right, it doesn’t seem like it’s possible. Because of the way that the states and view are set up, you’ll need to duplicate your state and define a new outlet for the view.

To my understanding of ui-router, I think this is the only way to do it.


Creating shared routes in different views
#9

np, I figured there was no other way, but wanted to double check, thanks and great platform!


#10

Hey guys,

Did any of you guys solved that thing since last year? I need something exactly similar: multiple tabs rendering the same state with different url parameters.

Duplicating routes is not really an option for me.

Cheers!