Question

我的页面中有左侧和右侧菜单。我的应用有英文/阿拉伯文翻译。当使用英语时，面板应位于左侧，对于阿拉伯语，面板应位于右侧。

所以我打算在我的页面中同时显示这两个菜单，并根据语言启用/禁用左/右面板菜单。

我的菜单页面看起来类似于下面的内容：

<ion-side-menus>
  <!-- Left menu -->
  <ion-side-menu side="left" is-enabled={{enableLeftMenu}}>
  </ion-side-menu>

  <ion-side-menu-content>
  <!-- Main content, usually <ion-nav-view> -->
  </ion-side-menu-content>

  <!-- Right menu -->
  <ion-side-menu side="right" is-enabled={{!enableLeftMenu}}>
  </ion-side-menu>

</ion-side-menus>

所以我尝试使用"is-enabled"属性。 http://ionicframework.com/docs/api/directive/ionSideMenu/

但问题是当我从控制器更改is-enabled属性的值时，它不会在视图中受到影响。

Answer 1

您需要将$ionicSideMenuDelegate注入您的控制器，然后在其上使用toggleLeft()或toggleRight()功能，具体取决于您要切换的菜单。

如另一个答案中所述，您可以使用drag-content="true"启用/禁用拖动，或使用JS中的canDragContent(false)启用/禁用它：）

希望有所帮助！

Answer 2

我在Codepen上找到了这个可能对你有所帮助的例子：

http://codepen.io/mhartington/pen/kKtFz

提供的示例

<ion-side-menu side="left">
  <ion-header-bar class="bar-assertive">
    <h1 class="title">Left Menu</h1>
  </ion-header-bar>
  <ion-content>
    <ul class="list">
      <!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links -->
      <a href="#/event/check-in" class="item" menu-close>Check-in</a>
      <a href="#/event/attendees" class="item" menu-close>Attendees</a>
    </ul>
  </ion-content>
</ion-side-menu>

<ion-side-menu side="right">
  <ion-header-bar class="bar-assertive">
    <h1 class="title">Right Menu</h1>
  </ion-header-bar>
  <ion-content>
   Some content
  </ion-content>
</ion-side-menu>

</ion-side-menus>

Answer 3

如果要禁用拖动，可以向指令添加属性或在控制器中使用$ ionicSideMenuDelegate：

在此处检查选项a）：http://ionicframework.com/docs/api/directive/ionSideMenuContent/

<ion-side-menu-content
  drag-content="false">
</ion-side-menu-content>

..或选项b）此处： http://ionicframework.com/docs/api/service/ $ ionicSideMenuDelegate /

$ionicSideMenuDelegate.canDragContent(false);

如何启用/禁用左/右侧菜单离子

3 个答案: