Ionic選項卡導航中的問題

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' 
        } 
      } 
}); 

視圖-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。