CODEWITHSUNDEEP
angularjsionic-frameworkangular-ui-router
Seb Bizeul
Seb Bizeul

Reputation: 1006

Multiple Views in one Tab

Here is a simple example of what I'm trying to do.
I have 2 tabs (Home and News) and 3 views (Home, News and Details). When I click on the Home and News tabs, it displays respectively the Home and News pages.
Here is my routing file:

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('tabs', {
        url: '/tabs',
        abstract: true,
        templateUrl: 'templates/tabs.html',
    })
    .state('tabs.home', {
        url: '/home',
        views: {
            'home-tab': {
                templateUrl: 'templates/home.html',
                controller: 'HomeCtrl'
            }
        }
    })
    .state('tabs.news', {
        url: '/news',
        views: {
            'news-tab': {
                templateUrl: 'templates/news.html',
                controller: 'NewsCtrl'
            }
        }
    })
    .state('tabs.details', {
        url: '/details',
        views: {
            'details-tab': {
                templateUrl: 'templates/details.html',
                controller: 'DetailsCtrl'
            }
        }
    })
$urlRouterProvider.otherwise('/tabs/home');

And here is my tabs view:

<ion-tabs class="tabs-icon-top tabs-positive ">
    <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
        <ion-nav-view name="home-tab"></ion-nav-view>   
    </ion-tab>  
    <ion-tab title="News" icon="ion-social-reddit" ui-sref="tabs.news">
        <ion-nav-view name="news-tab"></ion-nav-view>   
    </ion-tab>  
</ion-tabs>

I think it's OK... Now I want to go to the Details page from the News page. So i added a button in the News page like this:

<ion-view view-title="News">
    <ion-content class="padding content-stable">
        <button class="button button-positive" ui-sref="tabs.details">Go to Details</button>
    </ion-content>  
</ion-view>

When I click on the button, I'm still on the same page and my view remains the same. It's weird... However, the URL in my browser has changed to 

http://localhost:8101/#/tabs/details

which proves that the state has changed. I probably missed one thing ... but what???

Upvotes: 2

Views: 947

Answers (1)

Seb Bizeul
Seb Bizeul

Reputation: 1006

I found the answer to my own question!
It's a routing mistake...
To do this, the tabs.details state must have the same view name as the parent tab.

.state('tabs.news', {
    url: '/news',
    views: {
        'news-tab': {
            templateUrl: 'templates/news.html',
            controller: 'NewsCtrl'
        }
    }
})
.state('tabs.details', {
    url: '/details',
    views: {
        'news-tab': { // SAME VIEW NAME!!! 
            templateUrl: 'templates/details.html',
            controller: 'DetailsCtrl'
        }
    }
})

Upvotes: 3

Related Questions