Fixed side menu right/left issue, improved API

js/ext/angular/src/directive/ionicSideMenu.js

@@ -20,27 +20,18 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
   angular.extend(this, ionic.controllers.SideMenuController.prototype);
 
   ionic.controllers.SideMenuController.call(this, {
+    // Our quick implementation of the left side menu
     left: {
       width: 270,
-      pushDown: function() {
-        $scope.leftZIndex = -1;
-      },
-      bringUp: function() {
-        $scope.leftZIndex = 0;
-      }
     },
+
+    // Our quick implementation of the right side menu
     right: {
       width: 270,
-      pushDown: function() {
-        $scope.rightZIndex = -1;
-      },
-      bringUp: function() {
-        $scope.rightZIndex = 0;
-      }
     }
   });
 
-  $scope.contentTranslateX = 0;
+  $scope.sideMenuContentTranslateX = 0;
 
   $scope.sideMenuCtrl = this;
 })
@@ -72,28 +63,32 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
           defaultPrevented = e.defaultPrevented;
         });
 
-        Gesture.on('drag', function(e) {
+        var dragFn = function(e) {
           if(defaultPrevented) {
             return;
           }
           sideMenuCtrl._handleDrag(e);
-        }, $element[0]);
+        };
 
-        Gesture.on('release', function(e) {
+        Gesture.on('drag', dragFn, $element[0]);
+
+        var dragReleaseFn = function(e) {
           if(!defaultPrevented) {
             sideMenuCtrl._endDrag(e);
           }
           defaultPrevented = false;
-        }, $element[0]);
+        };
+
+        Gesture.on('release', dragReleaseFn, $element[0]);
 
         sideMenuCtrl.setContent({
           onDrag: function(e) {},
           endDrag: function(e) {},
           getTranslateX: function() {
-            return $scope.contentTranslateX || 0;
+            return $scope.sideMenuContentTranslateX || 0;
           },
           setTranslateX: function(amount) {
-            $scope.contentTranslateX = amount;
+            $scope.sideMenuContentTranslateX = amount;
             $element[0].style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
           },
           enableAnimation: function() {
@@ -107,6 +102,12 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
             $element[0].classList.remove('menu-animated');
           }
         });
+
+        // Cleanup
+        $scope.$on('$destroy', function() {
+          Gesture.off('drag', dragFn);
+          Gesture.off('release', dragReleaseFn);
+        });
       };
     }
   };
@@ -125,10 +126,23 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
       return function($scope, $element, $attr, sideMenuCtrl) {
         $scope.side = $attr.side;
 
+
         if($scope.side == 'left') {
           sideMenuCtrl.left.isEnabled = true;
+          sideMenuCtrl.left.pushDown = function() {
+            $element[0].style.zIndex = -1;
+          };
+          sideMenuCtrl.left.bringUp = function() {
+            $element[0].style.zIndex = 0;
+          };
         } else if($scope.side == 'right') {
           sideMenuCtrl.right.isEnabled = true;
+          sideMenuCtrl.right.pushDown = function() {
+            $element[0].style.zIndex = -1;
+          };
+          sideMenuCtrl.right.bringUp = function() {
+            $element[0].style.zIndex = 0;
+          };
         }
 
         $element.append(transclude($scope));

js/ext/angular/test/sideMenu.html

@@ -16,24 +16,37 @@
     <div ng-controller="MenuCtrl">
       <side-menu>
         <pane side-menu-content>
-          <header class="bar bar-header bar-dark">
-            <button class="button" ng-click="openLeft()"><i class="icon-reorder"></i></button>
+          <header class="bar bar-header bar-primary">
+            <button class="button button-icon" ng-click="openLeft()"><i class="icon ion-navicon"></i></button>
             <h1 class="title">Slide me</h1>
           </header>
           <div class="content has-header">
-            <h1>Slide me side to side!</h1>
+            <h1>Content</h1>
           </div>
         </pane>
         <menu side="left">
-          <h2>Left</h2>
-          <ul class="list">
-            <a href="#" class="list-item" ng-repeat="item in list">
-              {{item.text}}
-            </a>
-          </ul>
+          <header class="bar bar-header bar-primary">
+            <h1 class="title">Left</h1>
+          </header>
+          <content has-header="true">
+            <ul class="list">
+              <a href="#" class="item" ng-repeat="item in list">
+                {{item.text}}
+              </a>
+            </ul>
+          </content>
         </menu>
         <menu side="right">
-          <h2>Items</h2>
+          <header class="bar bar-header bar-primary">
+            <h1 class="title">Right</h1>
+          </header>
+          <content has-header="true">
+            <ul class="list">
+              <a href="#" class="item" ng-repeat="item in list">
+                {{item.text}}
+              </a>
+            </ul>
+          </content>
         </menu>
       </side-menu>
     </div>
@@ -43,6 +56,12 @@
       angular.module('sideMenuTest', ['ionic'])
 
       .controller('MenuCtrl', function($scope) {
+        $scope.list = [];
+        for(var i = 0; i < 20; i++) {
+          $scope.list.push({
+            text: 'Item ' + i
+          });
+        }
         $scope.openLeft = function() {
           $scope.sideMenuCtrl.toggleLeft();
         };