View which belongs to all tabs


#1

Hi, currently I have an app which is structured similar to Instagram in regards to its tabs:

  • Home
  • Search
  • Discover
  • Settings

I want to create a “user profile” view which could belong to either one of these tabs. It should also remember “back” history for its own tab. I have tried creating a state with multiple views i.e

 state('app.profile', {
    url: "/profile",
    views: {
     'dashboard-tab': {
        templateUrl: "templates/profile.html",
        controller: 'ProfileCtrl'
      },
      'search-tab': {
        templateUrl: "templates/profile.html",
        controller: 'ProfileCtrl'
      },
     'explore-tab': {
        templateUrl: "templates/profile.html",
        controller: 'ProfileCtrl'
      }
    }
  })

But when clicking on a profile link from the search tab, it would go to the profile view with the explore tab as the currently active one, seemingly because it was defined last.

How can I create a “shared view” which can belong to any tab?


#2

If you define something like this i think you don’t face any issues.

state('app.dashboard', {
url: "/dashboard",
views: {
 'dashboard-tab': {
    templateUrl: "templates/dashboard.html",
    controller: 'ProfileCtrl'
  }
})

state('app.search', {
url: "/search",
views: {
  'search-tab': {
    templateUrl: "templates/search.html",
    controller: 'ProfileCtrl'
  }})

state('app.explore', {
url: "/explore",
views: {
 'explore-tab': {
    templateUrl: "templates/explore.html",
    controller: 'ProfileCtrl'
   }
 }
})

And if there are any sub view in the same tab i.e. if you have another sub page in the explore tab, then you can easily maintain the state and the history will be maintained.

Lets say you have defined another state which will be part of the explore tab like below.

state('app.explore2', {
url: "/explore2",
views: {
 'explore-tab': {
    templateUrl: "templates/explore2.html",
    controller: 'ProfileCtrl'
   }
 }
})

Then when you move from explore to explore2, and if you try to click back button, then there wont be any issues, it will be navigated to explore page in the same tab.

I hope this is not exactly what you are referring to. But i just want to give you another way of getting this thing done.