2014-07-10 31 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打造准系统的离子应用。这将建立所有需要的页面和文件,添加转换,标签或侧面菜单。您可以生成应用程序并下载代码。请试一试!