mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(navclear): Ability to disable the next view transition and back button
This commit is contained in:
Adam Bradley
33
js/ext/angular/src/directive/ionicSideMenu.js
vendored
33
js/ext/angular/src/directive/ionicSideMenu.js
vendored
@@ -315,5 +315,36 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name menuClose
|
||||
* @module ionic
|
||||
* @restrict AC
|
||||
*
|
||||
* @description
|
||||
* Closes a side menu which is currently opened.
|
||||
*
|
||||
* @usage
|
||||
* Below is an example of a link within a side menu. Tapping this link would
|
||||
* automatically close the currently opened menu
|
||||
*
|
||||
* ```html
|
||||
* <a nav-clear menu-close href="#/home" class="item">Home</a>
|
||||
* ```
|
||||
*/
|
||||
.directive('menuClose', ['$ionicViewService', function($ionicViewService) {
|
||||
return {
|
||||
restrict: 'AC',
|
||||
require: '^ionSideMenus',
|
||||
link: function($scope, $element, $attr, sideMenuCtrl) {
|
||||
$element.bind('click', function(){
|
||||
sideMenuCtrl.close();
|
||||
});
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
})();
|
||||
|
||||
34
js/ext/angular/src/directive/ionicViewState.js
vendored
34
js/ext/angular/src/directive/ionicViewState.js
vendored
@@ -272,6 +272,40 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
|
||||
}
|
||||
};
|
||||
return directive;
|
||||
}])
|
||||
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name navClear
|
||||
* @module ionic
|
||||
* @restrict AC
|
||||
*
|
||||
* @description
|
||||
* Disables any transition animations between views, along with removing the back
|
||||
* button which would normally show on the next view. This directive is useful for
|
||||
* links within a sideMenu.
|
||||
*
|
||||
* @usage
|
||||
* Below is an example of a link within a side menu. Tapping this link would disable
|
||||
* any animations which would normally occur between views.
|
||||
*
|
||||
* ```html
|
||||
* <a nav-clear menu-close href="#/home" class="item">Home</a>
|
||||
* ```
|
||||
*/
|
||||
.directive('navClear', ['$ionicViewService', function($ionicViewService) {
|
||||
return {
|
||||
restrict: 'AC',
|
||||
link: function($scope, $element, $attr) {
|
||||
$element.bind('click', function(){
|
||||
$ionicViewService.nextViewOptions({
|
||||
disableAnimate: true,
|
||||
disableBack: true
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
})();
|
||||
|
||||
17
js/ext/angular/src/service/ionicView.js
vendored
17
js/ext/angular/src/service/ionicView.js
vendored
@@ -124,6 +124,7 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
|
||||
currentView = viewHistory.currentView,
|
||||
backView = viewHistory.backView,
|
||||
forwardView = viewHistory.forwardView,
|
||||
nextViewOptions = this.nextViewOptions(),
|
||||
rsp = {
|
||||
viewId: null,
|
||||
navAction: null,
|
||||
@@ -159,7 +160,7 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
|
||||
rsp.navAction = 'moveBack';
|
||||
rsp.viewId = backView.viewId;
|
||||
//when going back, erase scrollValues
|
||||
currentView.rememberedScrollValues = {};
|
||||
currentView.rememberedScrollValues = {};
|
||||
if(backView.historyId === currentView.historyId) {
|
||||
// went back in the same history
|
||||
rsp.navDirection = 'back';
|
||||
@@ -240,6 +241,12 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
|
||||
hist.stack.push(viewHistory.views[rsp.viewId]);
|
||||
}
|
||||
|
||||
if(nextViewOptions) {
|
||||
if(nextViewOptions.disableAnimate) rsp.navDirection = null;
|
||||
if(nextViewOptions.disableBack) viewHistory.views[rsp.viewId].backViewId = null;
|
||||
this.nextViewOptions(null);
|
||||
}
|
||||
|
||||
this.setNavViews(rsp.viewId);
|
||||
|
||||
hist.cursor = viewHistory.currentView.index;
|
||||
@@ -389,6 +396,14 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
|
||||
return { historyId: 'root', scope: $rootScope };
|
||||
},
|
||||
|
||||
nextViewOptions: function(opts) {
|
||||
if(arguments.length) {
|
||||
this._nextOpts = opts;
|
||||
} else {
|
||||
return this._nextOpts;
|
||||
}
|
||||
},
|
||||
|
||||
getRenderer: function(navViewElement, navViewAttrs, navViewScope) {
|
||||
var service = this;
|
||||
var registerData;
|
||||
|
||||
@@ -2,21 +2,21 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Side Menus</title>
|
||||
|
||||
<!-- 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, width=device-width">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div ng-controller="MenuCtrl">
|
||||
|
||||
<ion-side-menus>
|
||||
|
||||
<ion-pane ion-side-menu-content>
|
||||
<header class="bar bar-header bar-assertive">
|
||||
<button class="button button-icon ion-navicon" ng-click="openLeft()"></button>
|
||||
<header class="bar bar-header bar-positive">
|
||||
<button class="button button-icon ion-navicon" ng-click="sideMenuController.toggleLeft(false)"></button>
|
||||
<h1 class="title">Slide me</h1>
|
||||
<button class="button button-icon ion-navicon" ng-click="openRight()"></button>
|
||||
<button class="button button-icon ion-navicon" ng-click="sideMenuController.toggleRight(false)"></button>
|
||||
</header>
|
||||
<ion-content class="has-header">
|
||||
<ion-toggle ng-model="$root.$draggy">Hello</ion-toggle>
|
||||
@@ -38,8 +38,9 @@
|
||||
</ul>
|
||||
</ion-content>
|
||||
</ion-side-menu>
|
||||
|
||||
<ion-side-menu side="right">
|
||||
<header class="bar bar-header bar-assertive">
|
||||
<header class="bar bar-header bar-royal">
|
||||
<h1 class="title">Right</h1>
|
||||
</header>
|
||||
<ion-content>
|
||||
@@ -50,29 +51,27 @@
|
||||
</ul>
|
||||
</ion-content>
|
||||
</ion-side-menu>
|
||||
|
||||
</ion-side-menus>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
angular.module('sideMenuTest', ['ionic'])
|
||||
|
||||
.controller('MenuCtrl', function($scope, $ionicSideMenuDelegate) {
|
||||
.controller('MenuCtrl', function($scope) {
|
||||
$scope.list = [];
|
||||
for(var i = 0; i < 20; i++) {
|
||||
$scope.list.push({
|
||||
text: 'Item ' + i
|
||||
});
|
||||
}
|
||||
$scope.openLeft = function() {
|
||||
$ionicSideMenuDelegate.toggleLeft($scope);
|
||||
};
|
||||
$scope.openRight = function() {
|
||||
$ionicSideMenuDelegate.toggleRight($scope);
|
||||
};
|
||||
})
|
||||
|
||||
.controller('LeftCtrl', function($scope) {
|
||||
$scope.value = true;
|
||||
$scope.list = [{text:1},{text:2},{text:3}];
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<ion-side-menus>
|
||||
|
||||
<ion-pane ion-side-menu-content>
|
||||
<ion-nav-bar type="bar-positive"
|
||||
<ion-nav-bar class="bar-positive"
|
||||
back-button-type=""
|
||||
back-button-icon="ion-ios7-arrow-back"></ion-nav-bar>
|
||||
<ion-nav-view name="menuContent"></ion-nav-view>
|
||||
@@ -28,8 +28,8 @@
|
||||
</header>
|
||||
<ion-content class="has-header">
|
||||
<div class="list">
|
||||
<a ng-click="closeMenu()" href="#/event/check-in" class="item">Check-in</a>
|
||||
<a ng-click="closeMenu()" href="#/event/attendees" class="item">Attendees</a>
|
||||
<a nav-clear menu-close href="#/event/check-in" class="item">Check-in</a>
|
||||
<a nav-clear menu-close href="#/event/attendees" class="item">Attendees</a>
|
||||
<div class="item item-divider">
|
||||
Range
|
||||
</div>
|
||||
@@ -43,7 +43,7 @@
|
||||
</ion-side-menu>
|
||||
|
||||
<ion-side-menu side="right">
|
||||
<header class="bar bar-header bar-assertive">
|
||||
<header class="bar bar-header bar-royal">
|
||||
<div class="title">Right Menu</div>
|
||||
</header>
|
||||
</ion-side-menu>
|
||||
@@ -52,7 +52,7 @@
|
||||
</script>
|
||||
|
||||
<script id="home.html" type="text/ng-template">
|
||||
<ion-view title="'Welcome'">
|
||||
<ion-view title="Welcome">
|
||||
<ion-content class="has-header" padding="true">
|
||||
<p>Swipe to the right to reveal the left menu.</p>
|
||||
<div class="button" ng-click="sideMenuController.toggleLeft()" style="position: absolute; left: 100px; top: 200px;">
|
||||
@@ -88,7 +88,7 @@
|
||||
</script>
|
||||
|
||||
<script id="check-in.html" type="text/ng-template">
|
||||
<ion-view title="'Event Check-in'" hide-back-button="true">
|
||||
<ion-view title="Check-in" hide-back-button="true">
|
||||
<ion-content class="has-header">
|
||||
<form class="list" ng-show="showForm">
|
||||
<div class="item item-divider">
|
||||
@@ -128,7 +128,7 @@
|
||||
</script>
|
||||
|
||||
<script id="attendees.html" type="text/ng-template">
|
||||
<ion-view title="'Event Attendees'">
|
||||
<ion-view title="Attendees">
|
||||
<ion-content class="has-header">
|
||||
<div class="list">
|
||||
<ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
|
||||
|
||||
Reference in New Issue
Block a user