Ionic tabs Issue in navigation

Question

I'm trying to navigate pages though tab. but when i click to navigate it displays blank page and also does not show any errors. here is my code.

app.js

.state('view_reports', {
    url : '/view_reports',
    templateUrl : 'templates/view_reports.html'
}).state('view_reports.daily_reports', {
           url : '/daily_reports',
           views : {
                   'view_reports-daily_reports' : {
                           templateUrl : 'templates/view_reports-daily_reports.html'
                   }
           }
}).state('view_reports.monthly_report', {
           url : '/monthly_report',
           views : {
                   'view_reports-monthly_report' : {
                           templateUrl : 'templates/view_reports-monthly_report.html'
                   }
           }
}).state('view_reports.catagory_report', {
           url : '/catagory_report',
           views : {
                   'view_reports-catagory_report' : {
                           templateUrl : 'templates/view_reports-catagory_report.html'
                   }
           }
});

view-report.html

<ion-view>
<ion-content padding = "true">
    <div class="bar bar-subheader" style="background-color:#9B6DC7;">
        <h2 class="title" style="color:#FFFFFF">Reports</h2>
    </div>
    <ion-tabs class="tabs-icon-top">
        <ion-tab title="Daily" icon-off="ion-clipboard" icon-on="ion-clipboard" href="#/view_reports/daily_reports">
            <ion-nav-view name="view_reports-daily_reports" ></ion-nav-view>
        </ion-tab>

        <ion-tab title="Monthly" icon-off="ion-ios-calendar-outline" icon-on="ion-ios-calendar" href="#/view_reports/monthly_report" on-select="onTabSelected()" on-deselect="onTabDeselected()">
            <ion-nav-view name="view_reports-monthly_report"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Yearly" icon-off="ion-calendar" icon-on="ion-calendar" href="#/view_reports/daily_reports" on-select="onTabSelected()" on-deselect="onTabDeselected()">
            <ion-nav-view name="view_reports-daily_reports"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Catagory" icon-off="ion-funnel" icon-on="ion-funnel" href="#/view_reports/catagory_report" on-select="onTabSelected()" on-deselect="onTabDeselected()">
            <ion-nav-view name="view_reports-catagory_report"></ion-nav-view>
        </ion-tab>

    </ion-tabs>
</ion-content>

view_reports-daily_reports.html

<ion-view>
<ion-content padding = "true">
<h1><p style="padding-top: 250px; left: 0px">your in daily report menu</p></h1>
    sdf
</ion-content>

i cant figure out issue...

Answer 1

If you are using child view, inside a particular view, make sure you have the abstract property set.

.state('view_reports', {
    url : '/view_reports',
    abstract: true,
    templateUrl : 'templates/view_reports.html'
})

Also in your view-report.html you should have the following markup:

<ion-tabs class="tabs-icon-top">
        <ion-tab title="Daily" icon-off="ion-clipboard" icon-on="ion-clipboard" href="#/view_reports/daily_reports">
            <ion-nav-view name="view_reports-daily_reports" ></ion-nav-view>
        </ion-tab>

        <ion-tab title="Monthly" icon-off="ion-ios-calendar-outline" icon-on="ion-ios-calendar" href="#/view_reports/monthly_report" on-select="onTabSelected()" on-deselect="onTabDeselected()">
            <ion-nav-view name="view_reports-monthly_report"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Yearly" icon-off="ion-calendar" icon-on="ion-calendar" href="#/view_reports/daily_reports" on-select="onTabSelected()" on-deselect="onTabDeselected()">
            <ion-nav-view name="view_reports-daily_reports"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Catagory" icon-off="ion-funnel" icon-on="ion-funnel" href="#/view_reports/catagory_report" on-select="onTabSelected()" on-deselect="onTabDeselected()">
            <ion-nav-view name="view_reports-catagory_report"></ion-nav-view>
        </ion-tab>

Remove ion-view and ion-content from abstract state.