離子選項卡視圖狀態提供程序空白視圖

我的導航欄內有一個選項卡視圖，但內容頁保持空白。我嘗試了很多不同的app.config設置，但沒有任何作用。我想將選項卡視圖作爲單獨的HTML文件，所以我必須得到這個工作。：/離子選項卡視圖狀態提供程序空白視圖

的index.html（應用程序的主頁）：

<ion-pane> 
<ion-nav-bar align-title="center" class="bar-stable"> 
    <ion-nav-back-button></ion-nav-back-button> 
    <ion-nav-title> 
     <img class="titleLogo" ng-src="img/headers/logo_tabbar.png" /> 
    </ion-nav-title> 
    </ion-nav-bar> 
    <ion-nav-view></ion-nav-view> 
</ion-pane>

home.html的（這是頁面，您獲得導航到）：

<ion-view ng-controller="mainCtrl"> 
<ion-tabs class='tabs-icon-top tabs-light'> 
    <ion-tab title="diary" href="#/diary"> 
    <ion-nav-view name="tab-diary"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="report" href="#/report"> 
    <ion-nav-view name="tab-report"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="rewards" href="#/rewards"> 
    <ion-nav-view name="tab-rewards"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="messages" href="#/messages"> 
    <ion-nav-view name="tab-messages"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="settings" href="#/settings"> 
    <ion-nav-view name="tab-settings"></ion-nav-view> 
    </ion-tab> 
</ion-tabs> 
</ion-view>

diary.html（例如其中一個選項卡）：

<ion-view view-title="Diary" ng-controller="diaryCtrl"> 
<ion-content> 
    diarytest</br> 
    diarytest 
</ion-content>

app.js（配置文件）：

app.config(function($stateProvider, $urlRouterProvider){ 
    $stateProvider.state('welcome',{ 
    url: '/welcome', 
    templateUrl: 'templates/welcome.html' 
    }); 
    $stateProvider.state('login',{ 
    url: '/login', 
    templateUrl: 'templates/login.html' 
    }); 
    $stateProvider.state('register',{ 
    url: '/register', 
    templateUrl: 'templates/register.html' 
    }); 

    $stateProvider.state('home',{ 
    url: '/home', 
    templateUrl: 'templates/home.html' 
    }); 
    $stateProvider.state('diary',{ 
    url: '/diary', 
    views:{ 
     'tab-diary':{ 
     templateUrl: 'templates/diary.html' 
     } 
    } 
    }); 
    $stateProvider.state('report',{ 
    url: '/report', 
    views:{ 
     'tab-report':{ 
     templateUrl: 'templates/report.html', 
     controller: 'reportCtrl' 
     } 
    } 
    }); 
    $stateProvider.state('rewards',{ 
    url: '/rewards', 
    views:{ 
     'tab-rewards':{ 
     templateUrl: 'templates/rewards.html', 
     controller: 'rewardsCtrl' 
     } 
    } 
    }); 
    $stateProvider.state('messages',{ 
    url: '/messages', 
    views:{ 
     'tab-messages':{ 
     templateUrl: 'templates/messages.html', 
     controller: 'messagesCtrl' 
     } 
    } 
    }); 
$stateProvider.state('settings',{ 
    url: '/settings', 
    views:{ 
     'tab-settings':{ 
     templateUrl: 'templates/settings.html', 
     controller: 'settingsCtrl' 
     } 
    } 
    }); 
    $urlRouterProvider.otherwise('/welcome'); 
});

來源

2016-02-29 Michael H.

我注意到兩兩件事：

<ion-view>標籤不關閉相應</ion-view>關閉標籤
ng-controller="diaryCtrl"直接在離子視圖上聲明而不是de clared在$ stateProvider爲：

'製表日記'：{ templateUrl： '模板/ diary.html'，控制器： 'diaryCtrl' }

不過我建議檢查工作離子「標籤」的應用，例如：

選項卡：http://codepen.io/beaver71/pen/LGZvvb
分頁和側菜單：http://codepen.io/beaver71/pen/WrqgNm

來源

2016-02-29 12:34:05 beaver

離子選項卡視圖狀態提供程序空白視圖

回答

相關問題