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

发布时间：2020-12-17 10:26:49 所属栏目：安全来源：网络整理

导读：我已经设置了模板页面和路线.当我将状态更改为“登录”状态时,我的页面转换不起作用,它只显示没有转换的页面.我不知道问题是什么.我的应用程序的主页面是index.html,带有 ion-nav-view元件. 这是我的路由代码： config(function($stateProvider,$urlRouterPr

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

你必须将它放在menu.html页面的animation =“slide-left-right”中.

例如. 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!