Side menu fix for #24

This commit is contained in:
Max Lynch
2013-10-15 11:58:34 -05:00
parent 9ec9cedf70
commit 305f22d673
5 changed files with 44 additions and 18 deletions

View File

@ -427,7 +427,6 @@ angular.module('ionic.ui.sideMenu', [])
ionic.controllers.SideMenuController.call(this, { ionic.controllers.SideMenuController.call(this, {
left: { left: {
width: 270, width: 270,
isEnabled: true,
pushDown: function() { pushDown: function() {
$scope.leftZIndex = -1; $scope.leftZIndex = -1;
}, },
@ -437,7 +436,6 @@ angular.module('ionic.ui.sideMenu', [])
}, },
right: { right: {
width: 270, width: 270,
isEnabled: true,
pushDown: function() { pushDown: function() {
$scope.rightZIndex = -1; $scope.rightZIndex = -1;
}, },
@ -508,9 +506,16 @@ angular.module('ionic.ui.sideMenu', [])
replace: true, replace: true,
transclude: true, transclude: true,
template: '<div class="menu menu-{{side}}"></div>', template: '<div class="menu menu-{{side}}"></div>',
compile: function(element, attr, transclude, sideMenuCtrl) { compile: function(element, attr, transclude) {
return function($scope, $element, $attr) { return function($scope, $element, $attr, sideMenuCtrl) {
$scope.side = attr.side; $scope.side = attr.side;
if($scope.side == 'left') {
sideMenuCtrl.left.isEnabled = true;
} else if($scope.side == 'right') {
sideMenuCtrl.right.isEnabled = true;
}
$element.append(transclude($scope)); $element.append(transclude($scope));
}; };
} }

View File

@ -8,7 +8,6 @@ angular.module('ionic.ui.sideMenu', [])
ionic.controllers.SideMenuController.call(this, { ionic.controllers.SideMenuController.call(this, {
left: { left: {
width: 270, width: 270,
isEnabled: true,
pushDown: function() { pushDown: function() {
$scope.leftZIndex = -1; $scope.leftZIndex = -1;
}, },
@ -18,7 +17,6 @@ angular.module('ionic.ui.sideMenu', [])
}, },
right: { right: {
width: 270, width: 270,
isEnabled: true,
pushDown: function() { pushDown: function() {
$scope.rightZIndex = -1; $scope.rightZIndex = -1;
}, },
@ -89,9 +87,16 @@ angular.module('ionic.ui.sideMenu', [])
replace: true, replace: true,
transclude: true, transclude: true,
template: '<div class="menu menu-{{side}}"></div>', template: '<div class="menu menu-{{side}}"></div>',
compile: function(element, attr, transclude, sideMenuCtrl) { compile: function(element, attr, transclude) {
return function($scope, $element, $attr) { return function($scope, $element, $attr, sideMenuCtrl) {
$scope.side = attr.side; $scope.side = attr.side;
if($scope.side == 'left') {
sideMenuCtrl.left.isEnabled = true;
} else if($scope.side == 'right') {
sideMenuCtrl.right.isEnabled = true;
}
$element.append(transclude($scope)); $element.append(transclude($scope));
}; };
} }

View File

@ -0,0 +1,18 @@
/**
* Test the side menu directive. For more test coverage of the side menu,
* see the core Ionic sideMenu controller tests.
*/
describe('Ionic Angular Side Menu', function() {
var el;
beforeEach(module('ionic.ui.sideMenu'));
beforeEach(inject(function($compile, $rootScope) {
el = $compile('<div side-menu-ctrl></div>')($rootScope);
}));
it('Should init', function() {
var scope = el.scope();
expect(scope.sideMenuCtrl).not.toBe(undefined);
});
});

View File

@ -6,14 +6,14 @@
<!-- Sets initial viewport load and disables zooming --> <!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet"> <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../../../dist/ionic.css"> <link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
</head> </head>
<body> <body>
<side-menu-ctrl> <div side-menu-ctrl>
<div class="full-section" side-menu-content> <div class="full-section" side-menu-content>
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<a href="#" class="button"><i class="icon-reorder"></i></a> <a href="#" class="button"><i class="icon-reorder"></i></a>
@ -34,9 +34,9 @@
<menu side="right"> <menu side="right">
<h2>Items</h2> <h2>Items</h2>
</menu> </menu>
</side-menu-ctrl> </div>
<script src="../../../../dist/ionic.js"></script> <script src="../../../../dist/js/ionic.js"></script>
<script src="../src/directive/ionicSideMenu.js"></script> <script src="../../../../dist/js/ionic-angular.js"></script>
<script> <script>
angular.module('sideMenuTest', ['ionic.ui.sideMenu']) angular.module('sideMenuTest', ['ionic.ui.sideMenu'])

View File

@ -6,7 +6,7 @@
<!-- Sets initial viewport load and disables zooming --> <!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet"> <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../dist/ionic.css"> <link rel="stylesheet" href="../dist/css/ionic.css">
</head> </head>
<body> <body>
@ -28,10 +28,8 @@
<h1>RIGHT</h1> <h1>RIGHT</h1>
</section> </section>
<script src="../../js/events.js"></script> <script src="../../../../dist/js/ionic.js"></script>
<script src="../../js/gestures.js"></script> <script src="../../../../dist/js/ionic-angular.js"></script>
<script src="../../js/views/sideMenu.js"></script>
<script src="../../js/controllers/sideMenuController.js"></script>
<script> <script>
var Controller = function(opts) { var Controller = function(opts) {
var _this = this; var _this = this;