View and Navigation Controller


#1

I was hoping someone could provide me an example of the $stateProvider route setup that would allow the the same url/path open in any tab?

I have the following entry which works fine in one tab (tab-a) and i get the back button in the header however if i try the same url in the other tab (tab-b) the url loads fine but the back button is missing.

.state('tabs.user-profile', {
  url: "/user/:userId",
  views: {
    'tab-a': {
      templateUrl: "templates/profile.html",
      controller: 'UserProfileCtrl'
     },
     'tab-b': {
       templateUrl: "templates/profile.html",
       controller: 'UserProfileCtrl'
    }
  }
})

I’m trying to figure out how to keep my code DRY. This implementation will be needed for other routes as well. I’m new to angular and i’m trying to figure out how ui-router is integrated with ionic.

Thanks


#2

Hmm, not sure why it wouldn’t be working to be perfectly frank. Hopefully our resident navigation expert @adam can chime in on this one.


#3

Yeah that’s a tough one. I would imagine the ui-router is just setting one of the tabs, while the other one isn’t even in the DOM at the moment. However, I wouldn’t necessarily call this a bug, because having the exact same state, under the same url, but in two different locations is difficult to manage. To save headaches I’d probably try to avoid setting the same state in two different locations. Hopefully that helps.


#4

@adam thanks for the replay. I’m new to angular so please forgive me for my stupidity.

Are you meaning do something like so?

.state('tabs.tab-a.user-profile', {
  url: "/user/:userId",
  views: {
    'tab-a': {
      templateUrl: "templates/profile.html",
      controller: 'UserProfileCtrl'
     }
})
.state('tabs.tab-b.user-profile', {
  url: "/user/:userId",
  views: {
     'tab-b': {
       templateUrl: "templates/profile.html",
       controller: 'UserProfileCtrl'
    }
  }
})

#5

I guess I’m curious why you’re having the same url /user/:userId point to two different views, tab-a and tab-b. Can you have the profile show up in just one of the tabs?


#6

@adam i’m trying to keep my code DRY as possible. Here is my scenario.

Tab 1 - Notifications List

  1. User click on list item and is moved to a page with more details
    about the notification.
  2. From there the user can click on a username to view that user’s profile

Tab 2 - Events List

  1. User can click on event to view details
  2. User can click on a username in the details and view that user’s profile page

Hopefully this makes more sense about the flow i’m trying to achieve. Twitter app does a similar thing you can end up seeing a user’s profile from the timelines tab and notifications tab.


Possible to load controller only once for tabs and navigation view?
#7

Gotcha, that makes sense. I’d recommend a different url and state for each user detail, but both can still use the same templateUrl and controller.


#8

ok thanks. That is kind of what i’ve been doing just wanted to see if there was a cleaner way of handling this.