Question

我已经设置了模板页面和路线。当我将状态更改为“登录”状态时，我的页面转换不起作用，它只显示没有转换的页面。我不知道问题是什么。我的应用程序的主页面是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>

Answer 1

你必须把它放在动画=＆＃34;左右滑动＆＃34;在你的menu.html页面中。

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>

Answer 2

我创建了一个工具Ionic builder来为离子应用程序构建准系统。这将构建所有需要的页面和文件，添加转换，选项卡或侧面菜单。您可以生成应用程序并下载代码。请试一试！

页面转换不工作的离子框架

2 个答案: