angularjs - 根据范围变量显示 ion-nav-buttons 位置

Question

我有一个在 LTR 或 RTL 模式下工作的应用程序，我试图更新菜单以反射(reflect)方向，所以这就是我所做的:

<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>

而is_rtl是 Controller 中设置的用于了解方向的变量。问题是这没有任何效果。似乎 ionic 没有解析侧面部分的变量。手动输入向右或向左工作正常，但看起来不像可以动态工作。我什至尝试过 ng-if 但没有成功:

<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">

我该如何解决这个问题？

谢谢。

更新 1

我注意到第二次尝试使用 ng-if 部分有效，但仅当我导航到屏幕并返回主屏幕时，它在初始加载时不起作用。

Answer 1

简单说明一下，ion-nav-buttons指令必须是 ion-view 的第一个后代让它发挥作用。来自文档:

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).

从源代码来看side属性没有被插值，所以无论你做什么，它总是会解析为你传递的 html。这是snippet来自他们的编译函数

var side = 'left';

if (/^primary|secondary|right$/i.test(tAttrs.side || '')) {
    side = tAttrs.side.toLowerCase();
}

意思是tAttrs.side将等于 "{{is_rtl}}"而不是实际的 bool 值。

而且看起来 ng-[if|show] 在这里不起作用，因为指令的生命周期是由 $ionNavBarController 处理的。在初始化时。

简而言之，您目前无法使用 ion-nav-button 功能。但是，您可以通过设置隐藏的导航栏 <ion-view hide-nav-bar="true"> 来实现它。然后在自定义ion-header-bar中设置您的控件像这样:

<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>