CODEWITHSUNDEEP
javascriptangularjsionic-framework
Nina
Nina

Reputation: 108

Ionic Side Menu - only on one Page

I'm currently working on an App with the Ionic Framework and I came across the following problem:

In every page of the App there should be a left side menu available. In only one page ('events') there should be another side menu on the right. Now everything works fine until I visited the 'events'-page once: From that point on every page reveals an empty right side menu when swiping to the left - which, of course, shouldn't be there.

As I'm not sure if I explained the behaviour well enough I made a quick codepen for you to have a look at the app and my full code.

Thank you!

Here you have the important code fragments:

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();
    };
  }
});

[...]

Upvotes: 0

Views: 3520

Answers (4)

shenku
shenku

Reputation: 12430

I came across the same problem, this is the best way I found to solve it.

Firstly I had two templates for my menu, one standard and one include the right menu.

Standard (left only):

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

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

The rest of the magic happens with your routing settings, define an abstract route for each menu, and then apply to your route as desired:

  $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'
        }
      }
    })

Upvotes: 1

Kimmo Palander
Kimmo Palander

Reputation: 1

You should use is-enabled attribute instead of ng-if. This will affect swiping as well.

<ion-side-menu is-enabled="showRightMenu" side="right"></ion-side-menu>

See documentation at http://ionicframework.com/docs/api/directive/ionSideMenu/

Upvotes: 0

Nina
Nina

Reputation: 108

Okay, so after a bit more research I stumbled upon the $ionicSideMenuDelegate which can obviously also modify the settings for only one of the side menus. I wasn't aware of this, and so I wanted to share my solution for everyone else who might come across a similar problem:

$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;
      }
  })

Upvotes: 0

Paresh Gami
Paresh Gami

Reputation: 4782

In mainCtrl you have to put some conditions like where you dont want to display left menu.

In below lines of code give ng-hide="" and make this variable true or false from mainCtrl

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

Upvotes: 0

Related Questions