mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
109 lines
3.9 KiB
JavaScript
109 lines
3.9 KiB
JavaScript
IonicModule
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ionSideMenus
|
|
* @module ionic
|
|
* @delegate ionic.service:$ionicSideMenuDelegate
|
|
* @restrict E
|
|
*
|
|
* @description
|
|
* A container element for side menu(s) and the main content. Allows the left and/or right side menu
|
|
* to be toggled by dragging the main content area side to side.
|
|
*
|
|
* To automatically close an opened menu, you can add the {@link ionic.directive:menuClose} attribute
|
|
* directive. The `menu-close` attribute is usually added to links and buttons within
|
|
* `ion-side-menu-content`, so that when the element is clicked, the opened side menu will
|
|
* automatically close.
|
|
*
|
|
* "Burger Icon" toggles can be added to the header with the {@link ionic.directive:menuToggle}
|
|
* attribute directive. Clicking the toggle will open and close the side menu like the `menu-close`
|
|
* directive. The side menu will automatically hide on child pages, but can be overridden with the
|
|
* enable-menu-with-back-views attribute mentioned below.
|
|
*
|
|
* By default, side menus are hidden underneath their side menu content and can be opened by swiping
|
|
* the content left or right or by toggling a button to show the side menu. Additionally, by adding the
|
|
* {@link ionic.directive:exposeAsideWhen} attribute directive to an
|
|
* {@link ionic.directive:ionSideMenu} element directive, a side menu can be given instructions about
|
|
* "when" the menu should be exposed (always viewable).
|
|
*
|
|
* 
|
|
*
|
|
* For more information on side menus, check out:
|
|
*
|
|
* - {@link ionic.directive:ionSideMenuContent}
|
|
* - {@link ionic.directive:ionSideMenu}
|
|
* - {@link ionic.directive:menuToggle}
|
|
* - {@link ionic.directive:menuClose}
|
|
* - {@link ionic.directive:exposeAsideWhen}
|
|
*
|
|
* @usage
|
|
* To use side menus, add an `<ion-side-menus>` parent element,
|
|
* an `<ion-side-menu-content>` for the center content,
|
|
* and one or more `<ion-side-menu>` directives.
|
|
*
|
|
* ```html
|
|
* <ion-side-menus>
|
|
* <!-- Center content -->
|
|
* <ion-side-menu-content ng-controller="ContentController">
|
|
* </ion-side-menu-content>
|
|
*
|
|
* <!-- Left menu -->
|
|
* <ion-side-menu side="left">
|
|
* </ion-side-menu>
|
|
*
|
|
* <!-- Right menu -->
|
|
* <ion-side-menu side="right">
|
|
* </ion-side-menu>
|
|
* </ion-side-menus>
|
|
* ```
|
|
* ```js
|
|
* function ContentController($scope, $ionicSideMenuDelegate) {
|
|
* $scope.toggleLeft = function() {
|
|
* $ionicSideMenuDelegate.toggleLeft();
|
|
* };
|
|
* }
|
|
* ```
|
|
*
|
|
* @param {bool=} enable-menu-with-back-views Determines whether the side menu is enabled when the
|
|
* back button is showing. When set to `false`, any {@link ionic.directive:menuToggle} will be hidden,
|
|
* and the user cannot swipe to open the menu. When going back to the root page of the side menu (the
|
|
* page without a back button visible), then any menuToggle buttons will show again, and menus will be
|
|
* enabled again.
|
|
* @param {string=} delegate-handle The handle used to identify this side menu
|
|
* with {@link ionic.service:$ionicSideMenuDelegate}.
|
|
*
|
|
*/
|
|
.directive('ionSideMenus', ['$ionicBody', function($ionicBody) {
|
|
return {
|
|
restrict: 'ECA',
|
|
controller: '$ionicSideMenus',
|
|
compile: function(element, attr) {
|
|
attr.$set('class', (attr['class'] || '') + ' view');
|
|
|
|
return { pre: prelink };
|
|
function prelink($scope, $element, $attrs, ctrl) {
|
|
|
|
ctrl.enableMenuWithBackViews($scope.$eval($attrs.enableMenuWithBackViews));
|
|
|
|
$scope.$on('$ionicExposeAside', function(evt, isAsideExposed) {
|
|
if (!$scope.$exposeAside) $scope.$exposeAside = {};
|
|
$scope.$exposeAside.active = isAsideExposed;
|
|
$ionicBody.enableClass(isAsideExposed, 'aside-open');
|
|
});
|
|
|
|
$scope.$on('$ionicView.beforeEnter', function(ev, d){
|
|
if (d.historyId) {
|
|
$scope.$activeHistoryId = d.historyId;
|
|
}
|
|
});
|
|
|
|
$scope.$on('$destroy', function() {
|
|
$ionicBody.removeClass('menu-open', 'aside-open');
|
|
});
|
|
|
|
}
|
|
}
|
|
};
|
|
}]);
|