不同頁面上的不同側面菜單

我想根據所選頁面使用不同的側面菜單製作應用程序。不同頁面上的不同側面菜單

我的意思是，

當頁面首頁，我想與菜單主隊左側菜單。
當在購物頁面上時，我想要一邊左側菜單購物菜單。

有人可以指示我如何做到這一點嗎？

來源

2015-10-22 Afrgun

這種方式非常有益=> http://codepen.io/calendee/pen/bBcDm?editors=101 – Afrgun

歡迎堆棧溢出。我編輯了你的帖子來修復一些英文錯誤。我爲你的兩種情況使用了子彈。這是通過在行首使用破折號和空格完成的。 –

我做了一個小的演示，根據您的要求。希望這會幫助你。

Plunker demo

你需要在你index.html文件（左，右），以創建兩個側菜單。

<ion-side-menu side="right"> 
    <!-- Your left side menu content goes here --> 
</ion-side-menu> 
<ion-side-menu side="right"> 
    <!-- Your right side menu content goes here --> 
</ion-side-menu>

的index.html

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" /> 
    <title>Ionic Framework Example</title> 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" /> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
    <script src="app.js"></script> 
</head> 

<body> 
    <ion-side-menus> 
     <ion-pane ion-side-menu-content> 
      <ion-nav-bar class="bar-positive nav-title-slide-ios7"> 
       <ion-nav-back-button class="button-clear"> 
        <i class="ion-arrow-left-c"></i> Back 
       </ion-nav-back-button> 
      </ion-nav-bar> 
      <ion-nav-view animation="slide-left-right"></ion-nav-view> 
     </ion-pane> 
     <ion-side-menu side="left"> 
      <ion-content id="menu" has-header="true" ng-controller="mainCtrl"> 
       <ion-list style="background-color: black !important;border-bottom:white;"> 
        <ion-item style="border-style:none !important;"> 
         &nbsp;Status 
        </ion-item> 
        <ion-item nav-clear menu-close class="cb-lateral"> 
         &nbsp;Profile</ion-item> 
        <ion-item nav-clear menu-close class="cb-lateral"> 
         &nbsp;Address</ion-item> 
       </ion-list> 
      </ion-content> 
     </ion-side-menu> 
     <ion-side-menu side="right"> 
      <ion-content id="menu" has-header="true" ng-controller="mainCtrl"> 
       <ion-list style="background-color: black !important;border-bottom:white;"> 
        <ion-item style="border-style:none !important;"> 
         &nbsp;Status 
        </ion-item> 
        <ion-item nav-clear menu-close class="cb-lateral"> 
         &nbsp;Edit profile</ion-item> 
        <ion-item nav-clear menu-close class="cb-lateral"> 
         &nbsp;change address</ion-item> 
       </ion-list> 
      </ion-content> 
     </ion-side-menu> 
    </ion-side-menus> 
</body> 

</html>

home.html做爲

<ion-view title="User"> 
    <div class="bar bar-header bar-light"> 
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenuLeft()"></button> 
     <div style="width:100%"> 
     </div> 
     </div> 
    <ion-content padding="true"> 
    </ion-content> 
</ion-view>

settings.html

<ion-view title="User"> 
    <div class="bar bar-header bar-light"> 
     <div style="width:100%"> 
     </div> 
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenuRight()"></button> 
    </div> 
    <ion-content padding="true"> 
    </ion-content> 
</ion-view>

控制器

app.controller('mainCtrl', function($scope, $state, $ionicSideMenuDelegate) { 

    $scope.openMenuLeft = function() { 
     $ionicSideMenuDelegate.toggleLeft(); 
    }; 
    $scope.openMenuRight = function() { 
     $ionicSideMenuDelegate.toggleRight(); 
    }; 

});

來源

2015-10-22 08:09:23 Muhsin

感謝您的回答。但之前我做出了正確的菜單和左側菜單，但有些頁面需要不同的左側菜單。我已經包含了一個真正幫助我的鏈接。 :) – Afrgun

感謝您的演示。但是，如果您向左滑動或向右滑動，則菜單將呈現appar.So這不起作用。 :(我們如何禁用特定的效果，在右側或左側 – Mayur

@Mayur答案更新 – Muhsin

不同頁面上的不同側面菜單

回答

相關問題