在离子态上加载多个视图

load multiple view on a state ionic

本文关键字：视图 加载      更新时间：2023-09-26

大家好，我正在尝试在一个状态上加载两个视图。我面临的问题是，加载最后一个的视图占据了整个页面。我必须删除该元素才能查看第一个视图。

这是我的场景。我正在尝试加载我的右菜单，它是动态的，会随着时间的推移而变化。所以我把它放在另一个文件中，并试图加载它，但正如我所解释的问题，我的右菜单占据了整个页面，请告诉我我做错了什么。

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
  </head>
  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

菜单。Html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>
  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable bar-positive">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
  <!-- Right menu -->
  <ion-nav-view name="rightContent" class="soemthing">
  </ion-nav-view>
</ion-side-menus>

右菜单.html

 <ion-view view-title="Right"> 
  <ion-side-menus enable-menu-with-back-views="false">

    <ion-side-menu side="right">
      <ion-header-bar class="bar-stable bar-positive">
        <h1 class="title">Right</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item menu-close ng-click="login()">
            Login
          </ion-item>
          <ion-item menu-close href="#/app/search">
            Search
          </ion-item>
          <ion-item menu-close href="#/app/browse">
            Browse
          </ion-item>
          <ion-item menu-close href="#/app/playlists">
            Playlists
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>

    </ion-nav-view>
  </ion-side-menus>
</ion-view>

App.js

angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })
.state('app.playlists', {
  url: '/playlists',
  views: {
    'menuContent': {
      templateUrl: 'templates/playlists.html',
      controller: 'PlaylistsCtrl'
    },
    'rightContent': {
      templateUrl: 'templates/rightMenu.html'
    }
  }
})
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

您应该按照预期方式使用离子侧菜单。

<ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
    </button>
 </ion-nav-buttons>
<ion-nav-buttons side="right">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
    </button>
 </ion-nav-buttons>

有人在这里写了一个代码笔：http://codepen.io/anon/pen/VYvjze

您仍然可以像其他视图一样动态加载右菜单中的内容。

相关文章：