如何啓用/禁用左側/右側菜單離子

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