Question

我正在创建一个离子应用程序，我正在尝试使用侧边菜单创建一个主页，但它没有正确显示。我看过多个例子，我试图做同样的步骤，没有成功。问题是主菜单上的ion-nav-buttons和侧边菜单中的ion-header-bar没有显示。

这是home.html：

<ion-side-menus enable-menu-with-back-views="true">

  <!-- Left Menu -->
  <ion-side-menu side="left">
    <ion-header-bar class="bar-assertive">
      <h1 class="title">Left Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ui-sref="">Test 1</ion-item>
        <ion-item ui-sref="">Test 2</ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

  <!-- Main Menu -->
  <ion-side-menu-content>
    <ion-nav-buttons side="left">
      <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
      <button class="button-icon icon ion-email"></button>
    </ion-nav-buttons>
    <ion-nav-view name="homeContent"></ion-nav-view>
  </ion-side-menu-content>
</ion-side-menus>

这是menu-content.html：

<ion-view style="" title="Home">
  <ion-content padding="true">
    <label style="" class="item item-input">
      <i class="icon ion-search placeholder-icon"></i>
      <input placeholder="Search" type="search">
    </label>
    <br>
    <ion-list style="">
      <ion-item style="" ui-sref="ad">Ad 1</ion-item>
      <ion-item style="" ui-sref="ad">Ad 2</ion-item>
      <ion-item style="" ui-sref="ad">Ad 3</ion-item>
    </ion-list>
  </ion-content>
</ion-view>

这些是states中的route.js：

.state('home', {
      url: '/home',
      abstract:true,
      templateUrl: 'templates/home.html',
      controller: 'HomeCtrl'
    })


.state('home.menu-content', {
      url: '/home-menu-content',
      views: {
        'homeContent' :{
          templateUrl: 'templates/home-menu-content.html',
          controller : 'HomeMenuCtrl'
        }
      }
    })

这些是controllers：

.controller('HomeCtrl', function ($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };
})

.controller('HomeMenuCtrl', function ($scope) {

})

Answer 1

这是home.html：

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" data-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">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item data-menu-close href="#/app/home">
          Search
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

这是menu-content.html

<ion-view style="" title="Home">
  <ion-content padding="true">
    <label style="" class="item item-input">
      <i class="icon ion-search placeholder-icon"></i>
      <input placeholder="Search" type="search">
    </label>
    <br>
    <ion-list style="">
      <ion-item style="" ui-sref="ad">Ad 1</ion-item>
      <ion-item style="" ui-sref="ad">Ad 2</ion-item>
      <ion-item style="" ui-sref="ad">Ad 3</ion-item>
    </ion-list>
  </ion-content>
</ion-view>

这些是app.js中的状态：

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.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/home.html',
    controller: 'AppCtrl'
  })

  .state('app.home', {
      url: '/home',
    views: {
      'menuContent': {
          templateUrl: 'templates/home-menu-content.html',
          controller: 'HomeMenuCtrl'
      }
    }
  })


  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/home');
});

这些是控制器：

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {


    $scope.toggleLeft = function () {
        $ionicSideMenuDelegate.toggleLeft();
    };


})
.controller('HomeMenuCtrl', function ($scope, $ionicModal, $timeout) {



})

它的工作正常。经过测试

Answer 2

我发现了这个问题并且非常简单。我必须为主菜单创建一个<ion-nav-bar>。 <nav-buttons>没有显示在我项目的主标题栏中。现在，主菜单的片段是：

<!-- Main Menu -->
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
      </ion-nav-buttons>
      <ion-nav-buttons side="right">
        <button class="button-icon icon ion-email"></button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="homeContent"></ion-nav-view>
  </ion-side-menu-content>

带侧边菜单的页面无法正常显示

2 个答案: