離子選項卡導航中的問題

Question

我正在嘗試通過標簽導航頁面。 但是，當我單擊導航時，它顯示空白頁面，也沒有顯示任何錯誤。 這是我的代碼。

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>

我不知道問題...

Answer 1

如果使用的是子視圖，則在特定視圖內，請確保已設置了abstract屬性。

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

同樣，在view-report.html您應該具有以下標記：

<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-view和ion-content 。