diff --git a/src/components/swipe/demoBasicUsage/index.html b/src/components/swipe/demoBasicUsage/index.html index efe7bf6e95..6fc4eb9d02 100644 --- a/src/components/swipe/demoBasicUsage/index.html +++ b/src/components/swipe/demoBasicUsage/index.html @@ -1,23 +1,23 @@
-
+
Swipe me to the left
-
+
Swipe me to the right
+ 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 } }); }); }); } }