javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(gestures): $event local and simplify init

Browse Source
This commit is contained in:
Adam Bradley
2014-06-12 11:40:23 -05:00
parent cc34ec45eb
commit 90b4d34630
2 changed files with 37 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
js/angular/directive/gesture.js vendored
View File

@@ -1,6 +1,11 @@
forEach(
'onHold onTap onTouch onRelease onDrag onDragUp onDragRight onDragDown onDragLeft onSwipe onSwipeUp onSwipeRight onSwipeBottom onSwipeLeft'.split(' '),
function(name) {
IonicModule.directive(name, gestureDirective(name));
}
);
IonicModule
/**
* @ngdoc directive
@@ -16,7 +21,6 @@ IonicModule
* <button on-hold="onHold()" class="button">Test</button>
* ```
*/
.directive('onHold', gestureDirective('onHold'))
/**
@@ -34,7 +38,6 @@ IonicModule
* <button on-tap="onTap()" class="button">Test</button>
* ```
*/
.directive('onTap', gestureDirective('onTap'))
/**
@@ -52,7 +55,6 @@ IonicModule
* <button on-touch="onTouch()" class="button">Test</button>
* ```
*/
.directive('onTouch', gestureDirective('onTouch'))
/**
@@ -69,7 +71,6 @@ IonicModule
* <button on-release="onRelease()" class="button">Test</button>
* ```
*/
.directive('onRelease', gestureDirective('onRelease'))
/**
@@ -88,7 +89,6 @@ IonicModule
* <button on-drag="onDrag()" class="button">Test</button>
* ```
*/
.directive('onDrag', gestureDirective('onDrag'))
/**
@@ -105,7 +105,6 @@ IonicModule
* <button on-drag-up="onDragUp()" class="button">Test</button>
* ```
*/
.directive('onDragUp', gestureDirective('onDragUp'))
/**
@@ -122,7 +121,6 @@ IonicModule
* <button on-drag-right="onDragRight()" class="button">Test</button>
* ```
*/
.directive('onDragRight', gestureDirective('onDragRight'))
/**
@@ -139,7 +137,6 @@ IonicModule
* <button on-drag-down="onDragDown()" class="button">Test</button>
* ```
*/
.directive('onDragDown', gestureDirective('onDragDown'))
/**
@@ -156,7 +153,6 @@ IonicModule
* <button on-drag-left="onDragLeft()" class="button">Test</button>
* ```
*/
.directive('onDragLeft', gestureDirective('onDragLeft'))
/**
@@ -173,7 +169,6 @@ IonicModule
* <button on-swipe="onSwipe()" class="button">Test</button>
* ```
*/
.directive('onSwipe', gestureDirective('onSwipe'))
/**
@@ -190,7 +185,6 @@ IonicModule
* <button on-swipe-up="onSwipeUp()" class="button">Test</button>
* ```
*/
.directive('onSwipeUp', gestureDirective('onSwipeUp'))
/**
@@ -207,7 +201,6 @@ IonicModule
* <button on-swipe-right="onSwipeRight()" class="button">Test</button>
* ```
*/
.directive('onSwipeRight', gestureDirective('onSwipeRight'))
/**
@@ -224,7 +217,6 @@ IonicModule
* <button on-swipe-down="onSwipeDown()" class="button">Test</button>
* ```
*/
.directive('onSwipeDown', gestureDirective('onSwipeDown'))
/**
@@ -241,27 +233,30 @@ IonicModule
* <button on-swipe-left="onSwipeLeft()" class="button">Test</button>
* ```
*/
.directive('onSwipeLeft', gestureDirective('onSwipeLeft'));
function gestureDirective(attrName) {
return ['$ionicGesture', function($ionicGesture) {
function gestureDirective(directiveName) {
return ['$ionicGesture', '$parse', function($ionicGesture, $parse) {
return {
restrict: 'A',
link: function($scope, $element, $attr) {
var eventType = attrName.substr(2).toLowerCase();
compile: function($element, attr) {
var fn = $parse( attr[directiveName] );
var eventType = directiveName.substr(2).toLowerCase();
var listener = function(ev) {
$scope.$apply( $attr[attrName] );
return function(scope, element, attr) {
var listener = function(ev) {
scope.$apply(function() {
fn(scope, {$event:event});
});
};
var gesture = $ionicGesture.on(eventType, listener, $element);
scope.$on('$destroy', function() {
$ionicGesture.off(gesture, eventType, listener);
});
};
var gesture = $ionicGesture.on(eventType, listener, $element);
$scope.$on('$destroy', function() {
$ionicGesture.off(gesture, eventType, listener);
});
}
};
}];

26
test/html/gesture.html
View File

@@ -36,48 +36,48 @@
<body ng-controller="AppCtrl">
<p>
<button class="button" on-hold="gestureTest('hold')">
<button class="button" on-hold="gestureTest($event, 'hold')">
Hold
</button>
<button class="button" on-tap="gestureTest('tap')">
<button class="button" on-tap="gestureTest($event, 'tap')">
Tap
</button>
<button class="button" on-touch="gestureTest('touch')">
<button class="button" on-touch="gestureTest($event, 'touch')">
Touch
</button>
<button class="button" on-release="gestureTest('release')">
<button class="button" on-release="gestureTest($event, 'release')">
Release
</button>
<button class="button" ng-click="gestureTest('ng-click')">
<button class="button" ng-click="gestureTest($event, 'ng-click')">
Click
</button>
<button class="button" on-drag="gestureTest('drag')">
<button class="button" on-drag="gestureTest($event, 'drag')">
Drag
</button>
</p>
<div class="list">
<div class="item" on-swipe="gestureTest('swipe (any direction)')">
<div class="item" on-swipe="gestureTest($event, 'swipe (any direction)')">
Swipe (any direction)
</div>
<div class="item" on-swipe-left="gestureTest('swipe left')">
<div class="item" on-swipe-left="gestureTest($event, 'swipe left')">
Swipe Left
</div>
<div class="item" on-swipe-right="gestureTest('swipe right')">
<div class="item" on-swipe-right="gestureTest($event, 'swipe right')">
Swipe Right
</div>
</div>
<div on-swipe-down="gestureTest('swipe down')" class="swipe-vertical">
<div on-swipe-down="gestureTest($event, 'swipe down')" class="swipe-vertical">
Swipe Down
</div>
<div on-swipe-up="gestureTest('swipe up')" class="swipe-vertical swipe-up">
<div on-swipe-up="gestureTest($event, 'swipe up')" class="swipe-vertical swipe-up">
Swipe Up
</div>
@@ -90,8 +90,8 @@
.controller('AppCtrl', function($scope) {
$scope.gestureTest = function(data) {
o('gesture directive test', [data])
$scope.gestureTest = function($event, data) {
o('gesture directive test', [$event.type, data])
};
})