Question

我试图通过标签浏览页面。但是当我点击导航时，它显示空白页面，也没有显示任何错误。这是我的代码。

app.js

var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage("red.png", canvas.renderAll.bind(canvas));
$('select#color').on('change', function() {
    var imageName=this.value+".png"
    var canvas = new fabric.Canvas('c');
    canvas.setBackgroundImage(imageName, canvas.renderAll.bind(canvas));
})

视图-report.html

.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_reports-daily_reports.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>

我无法弄清楚问题......

Answer 1

如果您在特定视图中使用子视图，请确保设置了.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和{{1}}。

离子选项卡导航中的问题

1 个答案: