2015-08-25 2 views
0

В настоящее время я работаю над приложением с Рамками ионических и я наткнулся на следующую проблеме:Ионного Side Menu - только на одной странице

В каждой странице App должна быть меню с левой стороны доступны. На одной странице («события») справа должно быть другое боковое меню. Теперь все работает нормально, пока я не посетил страницу «событий»: с этой точки на каждой странице открывается пустое правое меню при прохождении влево - чего, конечно, не должно быть.

Поскольку я не уверен, что я достаточно хорошо объяснил поведение, я сделал быстрый код, чтобы вы могли посмотреть приложение и мой полный code.

Спасибо!


Здесь у вас есть важные фрагменты кода:

index.html:

<body ng-controller="MainCtrl" ng-app="ionicApp"> 

    <ion-side-menus> 
    <!--- NAV-MENU LEFT ---> 
    <ion-side-menu side="left">[...]</ion-side-menu> 

    <!--- EVENTS-MENU RIGHT ---> 
    <ion-side-menu side="right" ng-if="showRightMenu">[...]</ion-side-menu> 

    <ion-side-menu-content> 

     <!--- HEADER ---> 
     <ion-nav-bar class="bar bar-header bar-positive"> 
     <ion-nav-buttons side="left"> 
      <button class="button button-clear icon ion-navicon" menu-toggle="left"></button> 
     </ion-nav-buttons> 
     <ion-nav-buttons side="right"> 
      <button class="button button-clear icon ion-gear-a" ng-if="showRightMenu" menu-toggle="right"></button> 
     </ion-nav-buttons> 
     </ion-nav-bar> 

     <ion-nav-view></ion-nav-view> 
    </ion-side-menu-content> 

    </ion-side-menus> 

    <script id="home.html" type="text/ng-template">[...]</script> 
    <script id="events.html" type="text/ng-template">[...]</script> 

</body> 

app.js:

var app = angular.module('ionicApp', ['ionic', 'ionicApp.controllers']); 

app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('home', { 
     url: '/', 
     templateUrl: 'home.html' 
    }) 
    .state('events', { 
     url: '/events', 
     templateUrl: 'events.html' 
    }); 
    $urlRouterProvider.otherwise('/'); 
}); 

[...] 

app.controller('MainCtrl', function($scope, $state, $rootScope) { 
    [...] 

    //set ng-if-variable for the right side menu 
    $rootScope.$on('$stateChangeSuccess', 
    function(event, toState, toParams, fromState, fromParams) { 
     if (toState.name == 'events') { 
     $scope.showRightMenu = true; 
     } else { 
     $scope.showRightMenu = false; 
     } 

     //console.log($scope.showRightMenu); 
    }) 

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

[...] 

ответ

0

В mainCtrl вы должны поставьте некоторые условия, такие как wh Если вы не хотите отображать левое меню.

В строках ниже кода дают нг скрытие = «» и сделать эту переменную истинным или ложным из mainCtrl

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

Да, я знаю это (это то, что я сделал с ng-if), но я не хочу, чтобы левая кнопка di sappear, но «пустое» меню справа на всех страницах при прокрутке влево ... – Nina

+0

ОК, поэтому, когда мы скрываем меню левой стороны, мы также должны отключить салфетки? –

+0

Я хочу отключить меню правой стороны, но да, точно. Несмотря на то, что ng-if = false установлено в правом ионном боковом меню, все еще можно открыть его. Однако контент исчез. – Nina

0

Ладно, так что после того, как немного больше исследований, я наткнулся на $ ionicSideMenuDelegate, который, очевидно, может измените настройки только для одного из боковых меню. Я не знал об этом, и поэтому я хотел бы поделиться своим решением для всех остальных, кто мог бы встретить подобную проблему:

$rootScope.$on('$stateChangeSuccess', 
    function(event, toState, toParams, fromState, fromParams){ 
     if (toState.name == 'events'){ 
      $scope.showRightMenu = true; 
      $ionicSideMenuDelegate._instances[0].right.isEnabled = true; 
     } 
     else { 
      $scope.showRightMenu = false; 
      $ionicSideMenuDelegate._instances[0].right.isEnabled = false; 
     } 
    }) 
+0

где в коде вы разместили это? – rcat24

+0

Я разместил это внутри основного App-Controller – Nina

2

я наткнулся на такой же проблемой, что это лучший способ я нашел, чтобы решить эту проблему.

Во-первых, у меня было два шаблона для моего меню, один стандарт и один включают в себя правильное меню.

Стандартный (левый только):

<ion-side-menus enable-menu-with-back-views="false" class="dark"> 
    <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" 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-content> 
    </ion-content> 
    </ion-side-menu> 

</ion-side-menus> 

Right меню:

<ion-side-menus enable-menu-with-back-views="false" class="dark"> 
    <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" 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> 
    </ion-nav-bar> 
    <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 

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

    <ion-side-menu side="right"> 
    </ion-side-menu> 
</ion-side-menus> 

Остальная часть магии происходит с вашими настройками маршрутизации, определить абстрактный маршрут для каждого меню, а затем применить к ваш маршрут по вашему желанию:

$stateProvider 
    .state('app', { 
     url: '/app', 
     abstract: true, 
     templateUrl: 'templates/menu.html', 
     controller: 'AppCtrl', 
    }) 
    .state('app-right', { 
     url: '/app', 
     abstract: true, 
     templateUrl: 'templates/rightMenu.html', 
     controller: 'AppCtrl', 
    }) 
    .state('app-right.settings', { 
     url: '/settings', 
     views: { 
     'menuContent': { 
      templateUrl: 'templates/settings.html' 
     } 
     } 
    }) 
    .state('app.about', { 
     url: '/about', 
     views: { 
     'menuContent': { 
      templateUrl: 'templates/about.html' 
     } 
     } 
    }) 
Смежные вопросы