zachfitz / Ionic-Material

Material Design style and animations for Ionic
http://ionicmaterial.com
Other
2.9k stars 904 forks source link

How to hide a nav bar in a Ionic Material project? #169

Closed rig1 closed 8 years ago

rig1 commented 8 years ago

I am trying to hide a nav bar in an Ionic Material project. Can anyone tell how to do it. i tried hide-nav-bar="true" but it doesn't helped me.

aazbeltran commented 8 years ago
$scope.hideNavBar = function() {
    document.getElementsByTagName('ion-nav-bar')[0].style.display = 'none';
};
$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.showNavBar = function() {
    document.getElementsByTagName('ion-nav-bar')[0].style.display = 'block';
};
$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();
};

Then:

$timeout(function() {
    $scope.$parent.hideHeader();
}, 0);
rig1 commented 8 years ago

Thanks aazbeltran. It's working