Ionic - Display side menu in all view except main page

Asked

Viewed 1,764 times

5

Hi. I have a problem regarding the side menu of Ionic. I need to display it in all views except the first one.

I tried to put all views with the side menu, and give Hide on the menu button on the main page, but by putting Hide on the button, it disappears in all views. So it didn’t work out.

Later I also tried to insert the side menu in all the views, except in the main page, however as the side menu is being created in the "page 2", the back-button does not appear to take back the main page. When inspecting the element, I realized that the back-button exists, but with an Hide class that I can’t change. Someone knows how to do this?

inserir a descrição da imagem aqui

angularjs ionic

  • I need to see what you’re calling the menu icon. In my app I place the buttons inside a "<ion-Nav-Buttons side="left">" only on the pages I want the menu button.

3 answers

1

In practice just create a route to the menu and use on the pages you want, for example : 

(function() {
    'use strict';
    angular.module('testModule').config(router);
    router.$inject = ['$stateProvider', '$urlRouterProvider'];

    function router($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('menu', {
                url: '/menu',
                abstract: true,
                templateUrl: 'menu/menu.html',
                controller: 'menuController'
            }).state('menu.pageOne', {
                url: '/pageOne',
                views: {
                    'menuContent': {
                        templateUrl: 'pageOne/pageOne.html',
                        controller: 'pageOneController'
                    }
                }
            }).state('menu.pageTwo', {
                url: '/pageTwo',
                views: {
                    'menuContent': {
                        templateUrl: 'pageTwo/pageTwo.html',
                        controller: 'pageTwoController'
                    }
                }
            }).state('login', {
                url: '/login',
                templateUrl: 'login/login.html',
                controller: 'loginController'
            });

        $urlRouterProvider.otherwise('/login');
    }
})();

In this situation, for example, the login page does not have the menu. So every time you redirect to login screen the menu will not appear.

  • hello I’m with a similar problem and I’m new with Ionic, my code is similar to yours, however I do not understand where this menuContent comes from and also, if I inform menu. Page already includes the menu view?

1

In your view, use hide-nav-bar="true" as in the following example:

<ion-view title="Sua localização" hide-nav-bar="true">

    <ion-content padding="true" class="has-header" has-bouncing="true">

Regarding the back button, before calling another screen use:

$ionicHistory.nextViewOptions({
                disableBack: false,
                historyRoot: true
            });

            $ionicHistory.clearCache();
            $ionicHistory.clearHistory();

$state.go("a_sua_view_no_apps");

1

This documentation can help you: Ionic History

Use the $ionicHistory.currentView() to see if this is on the main page, if you are hiding the side-menu: Side-menu

Browser other questions tagged angularjs ionic

You are not signed in. Login or sign up in order to post.