Question

是否有人在angularjs / ionicframework

中的嵌套视图上成功添加了页面转换

这是我的嵌套视图的代码。当我转到此页面时，转换无法正常工作

<ion-side-menus>
    <ion-nav-view name="left"></ion-nav-view>
    <ion-nav-view name="main"></ion-nav-view>
</ion-side-menus>

但是如果我只放这个代码

<ion-nav-view name="main"></ion-nav-view>

页面转换正在运行

我希望你能帮助我解决这个问题。谢谢！

Answer 1

在index.html中，您应该有一个离子导航视图（您可以使用多个离子视图填充此离子导航视图），如下所示：

<div ng-app="ffApp" animation="slide-left-right" ng-controller="authRoute.controller">
<ion-nav-view></ion-nav-view>

然后你想创建状态/子状态来填充视图：

 $stateProvider
            .state('authenticate', {
                url: '/authenticate',
                templateUrl: 'templates/authentication.html'
            })
            .state('loginIos', {
                url: '/loginIos',
                templateUrl: 'templates/loginIos.html',
                controller: 'loginIos.controller',
            })
            .state('home', {
                url: '/home',
                templateUrl: 'templates/home.html',
                controller: 'home.controller',
            }).state('home.home1', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "home.html"
        }
      }
    })

在模板文件中你将有一个带有侧边菜单的离子视图，如果要将侧边菜单填充为子状态，可以在状态提供者中创建子状态，然后放置离子导航视图在旁边的菜单中。

    <ion-view>
     <ion-side-menus>
  <!-- Center content -->
  <ion-side-menu-content ng-controller="ContentController">

  <!-- Left menu -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <!-- Right menu -->
  <ion-side-menu side="right">
  </ion-side-menu>

  <ion-side-menu-content>
  <!-- Main content, usually <ion-nav-view> -->
  </ion-side-menu-content>
</ion-side-menus>

</ion-view>

然后当您导航到诸如home.home1之类的子状态时，home.home1的模板将填充homecontent ion-nav-view，该视图包含在home状态模板中。

请参阅此示例：http://codepen.io/mhartington/pen/Bicmo/

离子框架页面转换

1 个答案: