angularjs - 页面转换不工作 ionic 框架

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

你必须把它放在你的 menu.html 页面的 animation="slide-left-right"中。

例如。菜单.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>