Ionic Framework - Using Same View for Multiple Tabs

Question

I know this has been addressed a few times, but I am trying to figure out the right way to architect this solution:

I have 5 tabs, where all 5 tabs, where in these tabs, I need to use the same view and the same URL for multiple tabs. For example:

feedTab (/feed, tab is tab-feed) -> checkinDetail (checkin/:checkinId) -> ItemDetail (item/:itemId) profileTab (/profile, tab is tab-profile) -> checkinDetail (checkin/:checkinId) -> ItemDetail (item/:itemId)

Is this possible? If not - what is the best way to do this in ionic using Tabs?

craigvl · Accepted Answer · 2015-08-20 02:50:49Z

1

I have done this, you just need to define a state for each of the possible detail views. For example:

In my application I have a detail view that can be accessed from more than one tab.

templates/ride-detail.html

I have two tabs that can access the above detail view:

tab.profile
tab.rides

and they have states defined as below:

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

    .state('tab.rides', {
        url: '/rides',
        params: {
            issearch: null,
            radius: null
        },
        views: {
            'tab-rides': {
                templateUrl: 'templates/tab-rides.html',
                controller: 'RidesCtrl'
            }
        }
    })

To enable the ride detail view to be accessed from the two above tabs I defined two states for this as below:

 .state('tab.ride-detail', {
        url: '/rides/:rideId',
        views: {
            'tab-rides': {
                templateUrl: 'templates/ride-detail.html',
                controller: 'RideDetailCtrl'
            }
        }
    })

.state('tab.profile-detail', {
        url: '/profile/:rideId',
        views: {
            'tab-profile': {
                templateUrl: 'templates/ride-detail.html',
                controller: 'RideDetailCtrl'
            }
        }
    })

Then from the rides tab I call code below to get to detail view:

 $state.go('tab.ride-detail', {
        rideId: rideid
    });

and from profile tab call:

 $state.go('tab.profile-detail', {
        rideId: rideid
    });

Then in your view you can have ng-click="godetail(checkinId)"

and then change state call depending on the controller that the godetail function calls into, so in my case when godetail is called from profile tab:

 $scope.godetail = function (rideid) {
    $state.go('tab.profile-detail', {
        rideId: rideid
    });
};

and when called from rides tab:

$scope.godetail = function (rideid) {
        $state.go('tab.ride-detail', {
            rideId: rideid
        });
    };

Hope this helps.

edited Aug 20, 2015 at 2:50

answered Aug 19, 2015 at 2:38

craigvl

3802 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gregavola Over a year ago

This is great - but that URL is the same in both views - for example - in the profile-tab, I have /checkin/:checkinId and on the feed-tab, I also have /checkin/:checkinId. Is this not possible?

craigvl Over a year ago

@gregavola I could be wrong but if they are the same then you might have an issue with the back history? Try if and see. Otherwise does it matter to have two different URL's if they are going to the same view.html?

gregavola Over a year ago

since the URLs (hrefs) are coded in the views, I'm not sure it's possible to have two URLs in one view?

Collectives™ on Stack Overflow

Ionic Framework - Using Same View for Multiple Tabs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related