离子选项卡导航中的问题

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 。