Ionic Transparent Nav Bar in one view - angularjs

Question

I am trying to get the nav bar to become transparent in a one view. However I'm having trouble doing that.
Here's my menu.html
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable" ng-class="clear">
<ion-nav-back-button>
</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-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Here's my menu controller
$rootScope.$on('noNavBar', function(){
$scope.clear = 'bar-light';
console.log($scope.clear);
});
Here's the css
.bar.bar-light {
background-color: rgba(255,255,255,.66) !important; or transparent, or background:none
}
.scroll-content {
overflow: visible !important;
}
Is it because the nav bar is cached?

Answer 1

If you need to hide nav-bar in a specific view use hide-nav-bar="true" inside <ion-view>.
If you need to customize nav-bar (i.e. apply a specific class) add an <ion-nav-bar> tag inside the <ion-view> you want with a custom nav bar:
<ion-nav-bar align-title="right" class="bar-positive">...</ion-nav-bar>
Here is an example: http://codepen.io/beaver71/pen/XXeydY