Hide nav bar for a particular child view

hai
my problem is i need to hide the navigation bar for one particular view? i am specifying ion nav view on my parent tab and all the view has same controller too

Can you paste your code… So that we can understand it in better way

  .state('main', {
      url: '/main',
      abstract: true,
      templateUrl: 'Templates/main.html',
      controller: 'LoginCtrl'
  })
   .state('login', {
       url: '/login',
       parent: 'main',
       templateUrl: 'Templates/sign-in.html'
   })
    .state('partnerCato', {
        url: '/partnerCato',
        parent: 'main',
        templateUrl: 'Templates/PartnerCato.html',
    })
    .state('partnerCompanies', {
        url: '/partnerCompanies',
        parent: 'main',
        templateUrl: 'Templates/PartnerCompanies.html',
    })
    .state('partnerConsultants', {
        url: '/partnerConsultants',
        parent: 'main',
        templateUrl: 'Templates/PartnerConsultants.html',
    })
    .state('parConsultantView', {
        url: '/parConsultantView',
        parent: 'main',
        templateUrl: 'Templates/ParConsultantView.html',
    })

these are my different states
the main.html is seems like this

 <ion-view>
    <ion-nav-view>
        <ion-nav-bar class="bar-stable bar-assertive">
            <ion-nav-back-button>
            </ion-nav-back-button>
        </ion-nav-bar>
    </ion-nav-view>
</ion-view>

i am specifying nav bar in main.html only
but i don’t need the nav bar in login.html
1)i dont need nav bar in login.html how can i hide this?

Ok, I found one work around for your requirement.

In your main contorller have this block of code

$scope.hideNavBar = false;
if($state.is("login"))
{
  $scope.hideNavBar = true;
}

and in your main html

<ion-view>
    <ion-nav-view>
        <ion-nav-bar class="bar-stable bar-assertive" ng-hide="hideNavBar">
            <ion-nav-back-button>
            </ion-nav-back-button>
        </ion-nav-bar>
    </ion-nav-view>
</ion-view>

Try this and please let me know

1 Like

thank you for your help. This is code i am looking for but while using ng-hide white blank space is appeared instead of the nav bar so i am used ng-if its worked

<ion-view>
<ion-nav-view>
    <ion-nav-bar class="bar-stable bar-assertive" ng-if="hideNavBar">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
</ion-nav-view>
thank you
1 Like

i have one more problem that is i need to reset the hideNavBar value for other view also because now for the inner views nav bar not coming

Just turn that hideNavBar variable into false in the else statement

$scope.hideNavBar = false;
if($state.is("login"))
{
  $scope.hideNavBar = true;
}else{
  $scope.hideNavBar = true;
}

try this

No, control not came in the else part i thing the problem is my controller not re-initialising . i can’t reinitialise my controller for every view because each view sharing some data in same controller

You should have separate controllers for each view but I have one work around…

you need to reload your controller every time when you switch between the views. but I am sure this will led to some other issues. So I suggest you to have different controllers for each views.

1 Like

i know its issues my problem is that my each page is related to the previous pages(views) data that why i am doing so
any way i found a solution for my nav bar problem ,up to now its working fine .In my login.html page i am doing like this

 <ion-view view-title="Sign-In" hide-nav-bar="true">
1 Like