2014-07-10 16 views
5

Tôi đã thiết lập các trang mẫu và các tuyến đường của mình. Chuyển đổi trang của tôi không hoạt động khi tôi thay đổi trạng thái thành trạng thái 'đăng nhập', nó chỉ hiển thị trang mà không cần chuyển đổi. Tôi không biết vấn đề có thể là gì. Trang chính của ứng dụng của tôi là index.html với phần tử <ion-nav-view>.Chuyển đổi trang không hoạt động Ionic Framework

Đây là mã định tuyến của tôi:

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: Trang này là tình trạng cha mẹ. Các trang khác được kế thừa từ nó.

<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: Trang chính - tuyến đường được xác định trên trang này

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

Trả lời

3

Bạn phải đặt nó vào hoạt ảnh = "trượt-trái-phải" trong trang menu.html của bạn.

Ví dụ: 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

Tôi đã tạo ra một công cụ để xây dựng Ionic builder barebones cho ứng dụng ion. Điều này sẽ xây dựng tất cả các trang và tệp cần thiết, thêm hiệu ứng chuyển tiếp, tab hoặc menu phụ. Bạn có thể tạo ứng dụng và tải xuống mã. Vui lòng thử xem!

Các vấn đề liên quan