CODEWITHSUNDEEP
angularjsionic-framework
Yehia A.Salam
Yehia A.Salam

Reputation: 2078

Show ion-nav-buttons position based on a scope variable

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.

Upvotes: 2

Views: 321

Answers (1)

radyz
radyz

Reputation: 1714

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>

Upvotes: 2

Related Questions