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

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：

检查选项）位置：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);