サイドメニューが表示されているページが正しく表示されない

イオンアプリを作成していて、サイドメニュー付きのホームページを作成しようとしていますが、正しく表示されません。私は複数の例を見てきましたが、私は成功することなく全く同じ手順を実行しようとしました。問題は、メインメニューの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>

これらはroute.js内部statesです：

.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) { 

})

出典

2016-04-17 Manos

をfine.Tested。メインメニューのために<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>

出典

2016-04-23 11:51:00 Manos

これはhome.htmlです：

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

：

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

これは、メニュー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内部状態ですです

これらはコントローラです：

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

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


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


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



})

その作品は、私がこれまで問題を発見し、それは非常に簡単だった

出典

2016-04-21 12:40:14

サイドメニューが表示されているページが正しく表示されない

答えて

関連する問題