如何僅刪除登錄頁面中的菜單圖標 - 離子？

Question

我正在開發一個帶有Ionic Framework的應用程序，如何才能隱藏登錄頁面上的菜單和彈出按鈕？ 我只想在一些具體的視圖中顯示側邊菜單，但不是在每個視圖中都顯示。 請幫助我，我是離子框架的新手

- >

.controller('AppCtrl', function($scope, $ionicModal, $ionicPopover, $timeout) {
    // Form data for the login modal
    $scope.loginData = {};
    $scope.isExpanded = false;
    $scope.hasHeaderFabLeft = false;
    $scope.hasHeaderFabRight = false;

    var navIcons = document.getElementsByClassName('ion-navicon');
    for (var i = 0; i < navIcons.length; i++) {
        navIcons.addEventListener('click', function() {
            this.classList.toggle('active');
        });
    }
      // .fromTemplate() method
    var template =  '<ion-popover-view>' +
                    '   <ion-header-bar class="popbg">' +
                    '       <h1 class="title"><i class="ion ion-android-settings padding-right"></i>Settings</h1>' +
                    '   </ion-header-bar>' +
                    '   <ion-content>' +
                    '   <ion-list> ' +
                    '   <ion-item href="#/app/aboutapp"><i class="ion ion-information-circled padding-right"></i>  About App</ion-item> ' +
                    '   <ion-item href="#/app/profile"><i class="ion ion-person padding-right"></i>Profile</ion-item> ' +
                    '   <ion-item href="#/app/change-password"><i class="ion ion-key padding-right"></i>change password</ion-item> ' +
                    '   <ion-item href="#/app/login"><i class="ion ion-log-out padding-right"></i>Logout</ion-item> ' +
                    '   </ion-list> ' +
                    '   </ion-content>' +
                    '</ion-popover-view>';

    $scope.popover = $ionicPopover.fromTemplate(template, {
        scope: $scope
    });
    $scope.closePopover = function() {
        $scope.popover.hide();
    };
    //Cleanup the popover when we're done with it!
    $scope.$on('$destroy', function() {
        $scope.popover.remove();
    });
    ////////////////////////////////////////
    // Layout Methods
    ////////////////////////////////////////

    $scope.hideNavBar = function() {
        document.getElementsByTagName('ion-nav-bar')[0].style.display = 'none';
    };

    $scope.showNavBar = function() {
        document.getElementsByTagName('ion-nav-bar')[0].style.display = 'block';
    };

    $scope.noHeader = function() {
        var content = document.getElementsByTagName('ion-content');
        for (var i = 0; i < content.length; i++) {
            if (content[i].classList.contains('has-header')) {
                content[i].classList.toggle('has-header');
            }
        }
    };

    $scope.setExpanded = function(bool) {
        $scope.isExpanded = bool;
    };

    $scope.setHeaderFab = function(location) {
        var hasHeaderFabLeft = false;
        var hasHeaderFabRight = false;

        switch (location) {
            case 'left':
                hasHeaderFabLeft = true;
                break;
            case 'right':
                hasHeaderFabRight = true;
                break;
        }

        $scope.hasHeaderFabLeft = hasHeaderFabLeft;
        $scope.hasHeaderFabRight = hasHeaderFabRight;
    };

    $scope.hasHeader = function() {
        var content = document.getElementsByTagName('ion-content');
        for (var i = 0; i < content.length; i++) {
            if (!content[i].classList.contains('has-header')) {
                content[i].classList.toggle('has-header');
            }
        }

    };

    $scope.hideHeader = function() {
        $scope.hideNavBar();
        $scope.noHeader();
    };

    $scope.showHeader = function() {
        $scope.showNavBar();
        $scope.hasHeader();
    };

    $scope.clearFabs = function() {
        var fabs = document.getElementsByClassName('button-fab');
        if (fabs.length && fabs.length > 1) {
            fabs[0].remove();
        }
    };
})

.controller('LoginCtrl', function($scope, $timeout, $stateParams, ionicMaterialInk) {

    $scope.$parent.clearFabs();
    $timeout(function() {
        $scope.$parent.showHeader();
    }, 0);
    ionicMaterialInk.displayEffect();

})

//menu.html

<ion-nav-bar class="bar-assertive-900" ng-class="{expanded: isExpanded, 'has-header-fab-left': hasHeaderFabLeft, 'has-header-fab-right': hasHeaderFabRight}" align-title="left">
            <ion-nav-back-button class="no-text">
            </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-android-more-vertical" id="menu-popover" ng-click="popover.show($event)">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>

//Login.html

Answer 1

如果要刪除視圖中的側面菜單按鈕，則只需在該視圖中插入：

<ion-nav-buttons side="left"></ion-nav-buttons>

這是一個例子：

http://codepen.io/beaver71/pen/NNpVKL?editors=1010