I have an application that work in LTR or RTL mode, and im trying to update the menu to reflect the direction, so this is what i did:
<ion-view id="home" hide-back-button="true">
<ion-nav-title>
<img ng-src="{{logo_path}}" class="header-logo"/>
</ion-nav-title>
<ion-nav-buttons side="{{ (is_rtl) ? 'right' : 'left' }}">
<button menu-toggle="{{ (is_rtl) ? 'right' : 'left' }}" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
...
</ion-content>
</ion-view>
And the is_rtl is the variable set in the controller to know the direction. The problem is this does not have any effect. It appears that ionic does not parse the variable in the side part. Entering right or left manually works fine, but doesnt look it can work dynamically like. I even tried ng-if with no luck:
<ion-view id="home" hide-back-button="true">
<ion-nav-title>
<img ng-src="{{logo_path}}" class="header-logo"/>
</ion-nav-title>
<ion-nav-buttons side="left" ng-if="!is_rtl">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right" ng-if="is_rtl">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
How can I solve this?
Thanks.
Update 1
I noticed The second try using ng-if partially works, but only if i navigated to a screen and returned back to the home screen, it does not work on initial load.
Just a quick note, the ion-nav-buttons directive must be the first descendant of the ion-view for it to work. From the docs:
Note that ion-nav-buttons must be immediate descendants of the
ion-view or ion-nav-bar element (basically, don’t wrap it in another
div).
It looks from the source code the side attribute is not being interpolated so no matter what you do, it'll always resolve to the html you pass. This is the snippet from their compile function
var side = 'left';
if (/^primary|secondary|right$/i.test(tAttrs.side || '')) {
side = tAttrs.side.toLowerCase();
}
Meaning that tAttrs.side will equal to "{{is_rtl}}" and not the actual boolean value.
Also it looks like ng-[if|show] will not work here because the lifecycle of the directive is being handled by the $ionNavBarController on init.
In short it looks like your feature with ion-nav-button isn't possible at the moment. However you might be able to pull it off by setting the nav-bar hidden with <ion-view hide-nav-bar="true"> and then set your controls in a custom ion-header-bar like this:
<ion-header-bar>
<div class="buttons" ng-class="{'buttons-right': is_rtl}">
<span ng-class="{'right-buttons': is_rtl}">
<button class="button button-clear">
Right button block
</button>
</span>
</div>
</ion-header-bar>
Related
I am new to ionic. I have encountered following two directives :-
ion-header-bar and ionic-header-bar
I am confused regarding, when each of these directives are used ? I have tried playing with them
<ion-header-bar class="bar-balanced bar-subheader">
<button class="button button-icon icon ion-chevron-left"></button>
<h2 class="title">Sub Header</h2>
</ion-header-bar>
It shows the following UI :-
But, when I try
<ionic-header-bar class=" bar-balanced bar-subheader">
<button class="button button-icon icon ion-chevron-left"></button>
<h2 class="title">Sub Header</h2>
</ionic-header-bar>
UI changes to following :-
So, what's the use of ionic-header-bar directive ?
Thanks in advance.
According to the ionic framework docs there is no ionic-header-bar directive. In that way there is no use of it as an ionic UI element. It results in a plane HTML element. All ionic directives starts with an ion- element tag.
<ion-header-bar class="bar-balanced bar-subheader"></ion-header-bar>
where you have seen that:
<ionic-header-bar class=" bar-balanced bar-subheader">
</ionic-header-bar>
I think it does not exist and the correct code is:
<ion-header-bar class="bar-balanced bar-subheader">
</ion-header-bar>
(I Agree with lin)
<ion-nav-bar class="bar bar-header bar-dark bar-custom">
<ion-nav-back-button side="right"></ion-nav-back-button>
<ion-nav-buttons side="right" ng-if ="!$state.current.name==='Emaillogin'">
<button class="button button-icon button-clear ion-android-more-vertical" ng-click="popover.show($event)">
</button>
</ion-nav-buttons>
</ion-nav-bar>
Actually, I have placed popup button in my index.html page so that it must come up everywhere but I want to remove it from my login and signup page
i have checked it in button using ng-if but nothing happens
How to remove popup from both signup and login page !
Your ng-if statement
ng-if !="$state.current.name==='Emaillogin'"
is wrong. it should be like
ng-if="!($state.current.name==='Emaillogin')" or ng-if="$state.current.name!='Emaillogin'"
Two things are wrong here:
$state can not be used in html page, use $state.current.name in Controller.
Your if condition is not correct.
So your code should be like:
In controller:
$currentState = $state.current.name
and in html page:
<ion-nav-buttons side="right" ng-if ="currentState!='Emaillogin'">
<button class="button button-icon button-clear ion-android-more-vertical" ng-click="popover.show($event)">
</button>
</ion-nav-buttons>
I'm writing a canvas app and the canvas resides in my main view. On orientation change, I'd like to hide the header and footer.
I can't use a new view, because it would wipe out the canvas element (or at least hide it), and I'd have to re-run a bunch of graphics initialization code. Instead, I just resize the canvas to match the horizontal phone dimensions.
So, when the phone is horizontal I need to hide the header and footer of my view. Any ideas?
EDIT
So you can hide the footer with an ng-show. The same is not true of the header, which I'm still stuck on.
Here is a copy of my 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 the following attribute to your ion-view will hide the bar, and then removing the class "has-header" from ion-content will move your content upwards.
<ion-view hide-nav-bar="true"></ion-view>
However, it doesn't look like you can do this dynamically. i.e.:
<ion-view hide-nav-bar="{{hide}}"></ion-view>
...doesn't work. I'd welcome any thoughts on how to make it dynamic.
*I already answered the question about removing the footer bar in the edit
I have the following code:
<ion-nav-buttons ng-hide="items.length == 0" side="left">
<button class="button button-clear button-positive" ng-click="enableEdit()">{{EditText}}</button>
</ion-nav-buttons>
The problem is that I still see the item even though items is [] and the length is 0.
What's wrong here?
It seems like <ion-nav-buttons> is just a way to place the proper dom elements in the right place. It doesn't act like an element itself. The easiest way to solve this is to place the ng-hide attribute on the button itself (or on a div that surrounds all the buttons).
<ion-nav-buttons side="left">
<button class="button button-clear button-positive" ng-hide="items.length === 0" ng-click="enableEdit()">{{EditText}}</button>
</ion-nav-buttons>
I'm all new to Ionic, and this is my first project. I'm creating a little app with tab navigation in the bottom.
One tab view looks like this:
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
</ion-content>
</ion-view>
I want to add a button in the header next to Account, and according to documentation you use the ion-nav-bar elements, but no button shows up when I try this. Can anyone give me a clue how to add buttons in the header, in a tab view?
You can make use of ion-nav-button like this:
<ion-view title="Account">
<ion-nav-buttons side="left">
<button class="button" ng-click="doSomething()">
I'm a button on the left of the navbar!
</button>
</ion-nav-buttons>
<ion-content class="has-header padding">
<h1>Account</h1>
</ion-content>
</ion-view>
Example 1
Example 2