Seite mit Seitenmenü zeigt nicht richtig

Question

ich eine ionische App mache und ich versuche, eine Homepage mit Seitenmenü zu erstellen, aber es richtig zeigt nicht. Ich habe mehrere Beispiele gesehen und ich habe versucht, genau die gleichen Schritte zu machen, ohne Erfolg. Das Problem ist, dass die ion-nav-buttons im Hauptmenü und die ion-header-bar im Seitenmenü nicht zeigen.

Dies ist 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> 

Dies ist 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> 

Dies sind die states innerhalb der 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' 
     } 
     } 
    }) 

und diese sind die controllers:

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

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

}) 

Answer 1

ich das Problem dieses gefunden und es war sehr einfach. Ich musste ein <ion-nav-bar> für das Hauptmenü erstellen. Die <nav-buttons> wurden nicht in der Hauptleiste meines Projekts angezeigt. Nun ist das Snippet für das Hauptmenü dieses:

<!-- 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> 

Answer 2

Dies ist 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> 

Dies ist das Menü-content.html ist

<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> 

die Zustände innerhalb der app.js Diese sind:

// 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'); 
}); 

und diese sind die Steuerungen:

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

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


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


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



}) 

Seine Werke fine.Tested