CODEWITHSUNDEEP
angularjsionic-framework
Suthan M
Suthan M

Reputation: 443

ionic : Enable menu with back views issues

I created the application using with ionic slide menu and navigation between multiple views.

For example, I have View-A View-B and View-C.

If I used to navigate View-A to View-B and come back home screen the toggle left slide menu button is enabled.

If I used to navigate View-A to View-B then View-C and come back home screen the toggle left slide menu button got disabled.

Let me explain my code below:

tabs.html

<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button> Back
</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>

<!-- Logout -->
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-ios-person-outline" on-tap="doLogout()"></button>
</ion-nav-buttons>

</ion-nav-bar>


<ion-tabs class="tabs-icon-top tabs-color-active-positive">

<!-- Activity Tab -->
<ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/userActivity">
<ion-nav-view name="tab-userActivity"></ion-nav-view>
</ion-tab>

<!-- Scheduled Tasks Tab -->
<ion-tab title="Call Lists" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/overallCallsCtrl">
<ion-nav-view name="tab-overallCallsCtrl"></ion-nav-view>
</ion-tab>

<!-- Dashboard -->
<ion-tab title="Dashboard" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/dashboard">
<ion-nav-view name="tab-dashboard"></ion-nav-view>
</ion-tab>

</ion-tabs>

</ion-side-menu-content>

<!-- Side Menu (left) -->
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content class="customSlide">

<ion-list>

<ion-item class="item item-avatar">
<img src="img/men.png"><br>Welcome John!
</ion-item>

<ion-item menu-close href="#/tab/userActivity">
<i class="ion-ios-list-outline"></i>
Activity
</ion-item>

<ion-item menu-close href="#/tab/installationCall">
<i class="ion-ios-cloud-download-outline"></i>
Installation
</ion-item>

<ion-item menu-close href="#/tab/correctiveMaintenanceCall">
<i class="ion-ios-settings"></i>
Corrective Maintenance
</ion-item>

<ion-item menu-close href="#/tab/preventiveMaintenanceCall">
<i class="ion-ios-settings"></i>
Preventive Maintenance
</ion-item>

<ion-item menu-close href="#/tab/calibrationCall">
<i class="ion-ios-pulse"></i>
Calibration
</ion-item>


</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

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.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('revolApp', ['ionic', 'revolApp.UserSignInController','revolApp.DashboardController','revolApp.ActivityController','revolApp.CalibrationController','revolApp.CorrectiveMaintenanceController','revolApp.PreventiveMaintenanceController', 'revolApp.InstallationController','revolApp.ScheduledCallsController','revolApp.AddCallController','revolApp.AssignCallController','revolApp.CloseCallController','revolApp.ResponseCallController','revolApp.ScheduleCallController','revolApp.FeedbackController','revolApp.TabController','revolApp.OverallCallsController'])

.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 && 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, $ionicConfigProvider) {

/*
// note that you can also chain configs
$ionicConfigProvider.backButton.text('Back');
*/

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js


$stateProvider

// State to represent Login View
.state('userSignIn', {
url: '/userSignIn',
cache: false,
templateUrl: 'View/SigninView.html',
controller: 'UserSignInCtrl',

})

// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
cache: false,
abstract: true,
templateUrl: 'View/tabs.html',
controller: 'TabCtrl'
})

.state('tab.userActivity', {
url: '/userActivity',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ActivityView.html',
controller: 'ActivityCtrl'
}
}
})

.state('tab.scheduledInsideTabCalls', {
url: '/scheduledInsideTabCalls',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ScheduledCallsView.html',
controller: 'ScheduledCallsCtrl'
}
}
})

.state('tab.addCall', {
url: '/addCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/AddCallView.html',
controller: 'AddCallCtrl'
}
}
})

.state('tab.assignCall', {
url: '/assignCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/AssignCallView.html',
controller: 'AssignCallCtrl'
}
}
})

.state('tab.scheduleCall', {
url: '/scheduleCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ScheduleCallView.html',
controller: 'ScheduleCallCtrl'
}
}
})

.state('tab.responseCall', {
url: '/responseCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ResponseCallView.html',
controller: 'ResponseCallCtrl'
}
}
})

.state('tab.closeCall', {
url: '/closeCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/CloseCallView.html',
controller: 'CloseCallCtrl'
}
}
})

.state('tab.feedbackCall', {
url: '/feedbackCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/FeedbackView.html',
controller: 'FeedbackCtrl'
}
}
})

.state('tab.installationCall', {
url: '/installationCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/InstallationView.html',
controller: 'InstallationCtrl'
}
}
})

.state('tab.correctiveMaintenanceCall', {
url: '/correctiveMaintenanceCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/CorrectiveMaintenanceView.html',
controller: 'CorrectiveMaintenanceCtrl'
}
}
})

.state('tab.preventiveMaintenanceCall', {
url: '/preventiveMaintenanceCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/PreventiveMaintenanceView.html',
controller: 'PreventiveMaintenanceCtrl'
}
}
})

.state('tab.calibrationCall', {
url: '/calibrationCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/CalibrationView.html',
controller: 'CalibrationCtrl'
}
}
})


.state('tab.overallCallsCtrl', {
url: '/overallCallsCtrl',
cache: false,
views: {
'tab-overallCallsCtrl': {
templateUrl: 'View/OverallCallsView.html',
controller: 'OverallCallsCtrl'
}
}
})

.state('tab.dashboard', {
url: '/dashboard',
cache: false,
views: {
'tab-dashboard': {
templateUrl: 'View/DashboardView.html',
controller: 'DashboardCtrl'
}
}
});

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



});

Then If I navigate ViewA from C like below the slide menu toggle button got disabled.

Controller handling :

ActivityController.js // in this page toggle visible in simulator

$state.go('tab.scheduledInsideTabCalls');

In ActivityController Html and Signin Html page alone I set hide-back-button="true" other than that all HTML page I set hide-back-button="false"

AssignCallController.js // in this page back button visible in simulator

$state.go('tab.userActivity');

After reached userActivity page toggle got disabled.

Upvotes: 0

Views: 2425

Answers (2)

Howard
Howard

Reputation: 31

Button Hidden On Child Views By default, the menu toggle button will only appear on a root level side-menu page. Navigating in to child views will hide the menu- toggle button. They can be made visible on child pages by setting the enable-menu-with-back-views attribute of the ionSideMenus directive to true.

try changing "&lt ion-side-menus enable-menu-with-back-views="false" &gt" to "&lt ion-side-menus enable-menu-with-back-views="true" &gt"

Upvotes: 0

Sjoerd de Wit
Sjoerd de Wit

Reputation: 2413

It seems like you are using this code in an ion-nav-view. you should put this view as the base. Then extend them with a <ion-nav-view></ion-nav-view> in this code. example 

<ion-side-menus enable-menu-with-back-views="true">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <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-tabs class="tabs-icon-top tabs-color-active-positive">
      <!-- Store Tab -->
      <ion-tab title="Winkels" icon-off="ion-home" icon-on="ion-home" ui-sref="menu.shop">
        <ion-nav-view name="tab-shop"></ion-nav-view>
      </ion-tab>

      <!-- Cart Tab -->
      <ion-tab title="Winkelwagen" icon-off="ion-bag" icon-on="ion-bag" ui-sref="menu.cart">
        <ion-nav-view name="tab-cart"></ion-nav-view>
      </ion-tab>

      <!-- Contact Tab -->
      <ion-tab title="Contact" icon-off="ion-email" icon-on="ion-email" ui-sref="menu.contact">
        <ion-nav-view name="tab-contact"></ion-nav-view>
      </ion-tab>


    </ion-tabs>
  </ion-side-menu-content>
  <ion-side-menu side="right">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

routes: 

// 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.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
  .state('menu', {
    url: '/menu',
    abstract: true,
    templateUrl: 'templates/menu.html'
  })

  // Each tab has its own nav history stack:

  .state('menu.shop', {
    cache: false,
    url: '/shop',
    views: {
      'tab-shop': {
        templateUrl: 'templates/tab-shop.html',
        controller: 'ShopCtrl'
      }
    }
  })

  .state('menu.cart', {
    cache: false,
    url: '/cart',
    views: {
      'tab-cart': {
        templateUrl: 'templates/tab-cart.html',
        controller: 'CartCtrl'
      }
    }
  })

  .state('menu.contact', {
    url: '/contact',
    views: {
      'tab-contact': {
        templateUrl: 'templates/tab-contact.html',
        controller: 'ContactCtrl'
      }
    }
  })

  .state('menu.store', {
    cache: false,
    url: '/store/{storeId}',
    views: {
      'tab-shop': {
        templateUrl: 'templates/storeView.html',
        controller: 'StoreViewCtrl',
      }
    }
  })
  .state('menu.category', {
    cache: false,
    url: '/category/{categoryId}',
    views: {
      'tab-shop': {
        templateUrl: 'templates/categoryView.html',
        controller: 'CategoryViewCtrl',
      }
    }
  })
  .state('menu.product', {
    cache: false,
    url: '/product/{productId}',
    views: {
      'tab-shop': {
        templateUrl: 'templates/productView.html',
        controller: 'ProductViewCtrl',
      }
    }
  }).state('menu.checkout', {
    cache: false,
    url: '/checkout}',
    views: {
      'tab-cart': {
        templateUrl: 'templates/checkoutView.html',
        controller: 'CheckoutCtrl',
      }
    }
  });

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

});

Look at the abstract state of the menu route. This makes sure the rest of the views are loaded within this base view.

Upvotes: 0

Related Questions