angularjs - Is there a way to hide the header and footer of an ion-view dynamically? -
i'm writing canvas app , canvas resides in main view. on orientation change, i'd hide header , footer.
i can't use new view, because wipe out canvas element (or @ least hide it), , i'd have re-run bunch of graphics initialization code. instead, resize canvas match horizontal phone dimensions.
so, when phone horizontal need hide header , footer of view. ideas?
edit can hide footer ng-show. same not true of header, i'm still stuck on.
here copy of view:
<ion-view title="my title"> <ion-nav-buttons side="right"> <button menu-toggle="right" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-content class="has-header has-footer" id="testcanvas" overflow-scroll="true" on-scroll="scroll()"> </ion-content> <ion-footer-bar align-title="left" class="bar-assertive" style="padding-bottom: 60px;"> <div class="button-bar"> <button class="button icon-left ion-ios7-cloud-upload-outline" ng-click="go('save')">save</button> <button class="button icon-left ion-ios7-folder-outline" ng-click="go('load')">load</button> <button class="button icon-left ion-ios7-play-outline" ng-click="play()">play</button> </div> </ion-footer-bar> </ion-view>
so, adding following attribute ion-view hide bar, , removing class "has-header" ion-content move content upwards.
<ion-view hide-nav-bar="true"></ion-view> however, doesn't can dynamically. i.e.:
<ion-view hide-nav-bar="{{hide}}"></ion-view> ...doesn't work. i'd welcome thoughts on how make dynamic.
*i answered question removing footer bar in edit
Comments
Post a Comment