2014-07-10 30 views
5

我已經設置了我的模板頁面和我的路線。當我將狀態更改爲「登錄」狀態時,我的頁面轉換不起作用,它只顯示沒有轉換的頁面。我不知道問題可能是什麼。我的應用程序的主頁是index.html,其中<ion-nav-view>元素。頁面轉換不起作用離子框架

這裏是我的路由代碼:

config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

.state('app', { 
    url: "/app", 
    abstract: true, 
    templateUrl: "templates/menu.html", 
    controller: 'AppCtrl' 
}) 

.state('app.home', { 
    url: '/home', 
    views: { 
     'menuContent': { 
      templateUrl: "templates/home.html", 
      controller: 'HomeCtrl' 
     } 
    } 
}) 

.state('login', { 
    url: "/login", 
    templateUrl: "templates/login.html", 
    controller: 'LoginCtrl' 
}); 
     $urlRouterProvider.otherwise('/app/home'); 
}) 

menu.html:這頁是父狀態。其他頁面從它繼承。

<ion-pane ion-side-menu-content> 
    <ion-nav-bar class="bar-stable" id="header" animation="slide-left-right"> 
     <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button> 

     <img src="img/logo.png" alt="EasySpree" /> 

     <ion-nav-buttons side="right"> 
      <button class="button button-icon icon ion-ios7-email"> 
      </button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 

    <ion-nav-view name="menuContent"></ion-nav-view> 

    </ion-pane> 

的index.html:首頁 - 航線此頁面

<ion-nav-view id="main" animation="slide-left-right-ios7"></ion-nav-view> 

回答

3

你必須把它放在menu.html頁面的animation =「slide-left-right」中。

E.g. menu.html:

<ion-pane ion-side-menu-content> 
    <ion-nav-bar class="bar-stable" id="header" animation="slide-left-right"> 
    <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button> 

     <img src="img/logo.png" alt="EasySpree" /> 

     <ion-nav-buttons side="right"> 
     <button class="button button-icon icon ion-ios7-email"> 
     </button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 

<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view> 

1

定義我創建了一個工具Ionic builder打造準系統的離子應用。這將建立所有需要的頁面和文件,添加轉換,標籤或側面菜單。您可以生成應用程序並下載代碼。請試一試!