+
Swipe me to the left
-
+ class="demo-swipe" md-swipe-up="onSwipeUp($event, $target)">
Swipe me up
+ class="demo-swipe" md-swipe-down="onSwipeDown($event, $target)">
Swipe me down
diff --git a/src/components/swipe/demoBasicUsage/script.js b/src/components/swipe/demoBasicUsage/script.js
index 2450b8a260..fd14596095 100644
--- a/src/components/swipe/demoBasicUsage/script.js
+++ b/src/components/swipe/demoBasicUsage/script.js
@@ -1,17 +1,33 @@
angular.module('demoSwipe', ['ngMaterial'])
- .controller('demoSwipeCtrl', function($scope) {
- $scope.onSwipeLeft = function(ev) {
+ .controller('demoSwipeCtrl', function($scope, $log) {
+ $scope.onSwipeLeft = function(ev, target) {
alert('You swiped left!!');
+
+ $log.log('Event Target: ', ev.target);
+ $log.log('Event Current Target: ', ev.currentTarget);
+ $log.log('Original Current Target: ', target.current);
};
- $scope.onSwipeRight = function(ev) {
+ $scope.onSwipeRight = function(ev, target) {
alert('You swiped right!!');
+
+ $log.log('Event Target: ', ev.target);
+ $log.log('Event Current Target: ', ev.currentTarget);
+ $log.log('Original Current Target: ', target.current);
};
- $scope.onSwipeUp = function(ev) {
+ $scope.onSwipeUp = function(ev, target) {
alert('You swiped up!!');
+
+ $log.log('Event Target: ', ev.target);
+ $log.log('Event Current Target: ', ev.currentTarget);
+ $log.log('Original Current Target: ', target.current);
};
- $scope.onSwipeDown = function(ev) {
+ $scope.onSwipeDown = function(ev, target) {
alert('You swiped down!!');
+
+ $log.log('Event Target: ', ev.target);
+ $log.log('Event Current Target: ', ev.currentTarget);
+ $log.log('Original Current Target: ', target.current);
};
});
diff --git a/src/components/swipe/swipe.js b/src/components/swipe/swipe.js
index d248998391..b389c1fa66 100644
--- a/src/components/swipe/swipe.js
+++ b/src/components/swipe/swipe.js
@@ -14,9 +14,15 @@
* The md-swipe-left directive allows you to specify custom behavior when an element is swiped
* left.
*
+ * ### Notes
+ * - The `$event.currentTarget` of the swiped element will be `null`, but you can get a
+ * reference to the element that actually holds the `md-swipe-left` directive by using `$target.current`
+ *
+ * > You can see this in action on the
demo page (Look at the Developer Tools console while swiping).
+ *
* @usage
*
- * Swipe me left!
+ * Swipe me left!
*
*/
/**
@@ -30,9 +36,15 @@
* The md-swipe-right directive allows you to specify custom behavior when an element is swiped
* right.
*
+ * ### Notes
+ * - The `$event.currentTarget` of the swiped element will be `null`, but you can get a
+ * reference to the element that actually holds the `md-swipe-right` directive by using `$target.current`
+ *
+ * > You can see this in action on the
demo page (Look at the Developer Tools console while swiping).
+ *
* @usage
*
- * Swipe me right!
+ * Swipe me right!
*
*/
/**
@@ -46,9 +58,15 @@
* The md-swipe-up directive allows you to specify custom behavior when an element is swiped
* up.
*
+ * ### Notes
+ * - The `$event.currentTarget` of the swiped element will be `null`, but you can get a
+ * reference to the element that actually holds the `md-swipe-up` directive by using `$target.current`
+ *
+ * > You can see this in action on the
demo page (Look at the Developer Tools console while swiping).
+ *
* @usage
*
- * Swipe me up!
+ * Swipe me up!
*
*/
/**
@@ -62,9 +80,15 @@
* The md-swipe-down directive allows you to specify custom behavior when an element is swiped
* down.
*
+ * ### Notes
+ * - The `$event.currentTarget` of the swiped element will be `null`, but you can get a
+ * reference to the element that actually holds the `md-swipe-down` directive by using `$target.current`
+ *
+ * > You can see this in action on the
demo page (Look at the Developer Tools console while swiping).
+ *
* @usage
*
- * Swipe me down!
+ * Swipe me down!
*
*/
@@ -86,7 +110,8 @@ function getDirective(name) {
function postLink(scope, element, attr) {
var fn = $parse(attr[directiveName]);
element.on(eventName, function(ev) {
- scope.$applyAsync(function() { fn(scope, { $event: ev }); });
+ var currentTarget = ev.currentTarget;
+ scope.$applyAsync(function() { fn(scope, { $event: ev, $target: { current: currentTarget } }); });
});
}
}