ionic tabs: How to reuse the same detail page accross different tabs

Question

Here are two posts which basically describe the same need as mine. Unfortunately, these have been left with no concrete solution.

http://forum.ionicframework.com/t/reuse-master-detail-page-template-between-tabs/17493

http://forum.ionicframework.com/t/same-detail-page-for-2-different-tabs-with-history/17425

In order to explain a bit better what we're trying to achieve, please refer to the 2 charts below.

I trust that chart 1 needs no explanation as it is the classic use of tabs UI component.

However, in chart 2, we can see that if each tab needs to reuse the same master-detail controllers and templates, it is impossible to achieve out the box, the biggest difficulty being the static / declarative nature of the ui-router.

Concretely, I'm able to set things up correctly until the master view. I can actually reuse the same list (master) across the 3 tabs, and when I click on a row, the detail page appears, which is good. Unfortunately, it switches to the first tab !!

So the problem is, how can I reuse my templates and controllers code all the way to the detail page, while staying on the currently selected tab?

In other words : I want a details page that would show up in its corresponding tab when you click any item, in any of the lists, of any the tabs.

the following code shows that the ui-router forces you to point to a "hard-coded" view name, in this case "profile-into":

.state('profile.intro', {
            url: '/intro/:username',
            views: {
                **'profile-intro'**: {
                    templateUrl: 'app/profile/views/profile-intro.html',
                    controller: 'ProfileIntroCtrl'
                }
            }
        })

I need the view name to be dynamically set.

I figure some sort of global controller coupled with a directive could do the trick, but I can't get my head around it...

Any help is greatly appreciated !!

Answer 1

Posted a response over in the Ionic forum, but figured I'd dup it here as well...

I had a similar issue where I needed to reuse templates across tabs and maintain keeping the user in the active tab. I ended using $ionicTabsDelegate and in my controllers, grabbed the tab index by doing something like this $scope.selectedTabIndex = $ionicTabsDelegate.selectedIndex();

My issue was having the correct routes. I created routes for each tab that referenced the same template but had a different URL. In my templates, I then loaded in the selectedTabIndex, and when I needed to link to another view, I passed the tab index in my function to change states.

For example, in the template I am re-using, I have this:

ng-click="viewUser(id, selectedTabIndex);"

and in my controller, I have something like this:

$scope.viewUser = function(uid, tabIndex){
    if(tabIndex == 2){
        $state.go('tab.me-user',{ uid: uid});
    } else {
        $state.go('tab.user-profile',{ uid: uid});
    }
};

I would rather have multiple routes than multiple templates, so this worked well for me. I'd be very interested to see if someone else comes up with another way to achieve this.