mklickman · October 19, 2016 16:41 · Oct 19, 2016 · Oct 19, 2016 · Oct 19, 2016 · Oct 19, 2016
diff --git a/01-template.html b/01-template.html
@@ -17,6 +17,7 @@
     -->
     <div class="slide"
          swipe-handler-directive
+         click-handler="clickHandler(slide, $index)"
          ng-repeat="slide in slides track by $index"
     ></div>
 

diff --git a/02-controller.js b/02-controller.js
@@ -1,7 +1,7 @@
 angular.module('myApp')
   .controller('rootController', function($scope) {
-    $scope.clickHandler = function(item) {
-      // do something with 'item'
+    $scope.clickHandler = function(slide, $index) {
+      // do something with 'item' and $index
     };
   })
 ;
diff --git a/03-swipe-handler-directive.js b/03-swipe-handler-directive.js
@@ -2,11 +2,13 @@ angular.module('myApp')
   .directive('swipe-handler-directive', function() {
     return {
       restrict: "A",
-      scope: {},
+      scope: {
+        clickHandler: '&'
+      },
       link: function($scope, $element, $attrs) {
-        // do all the mousedown/mousemove event handler stuff
-        // here, and call the parent scope's click handler
-        // from here, but only if a swipe hasn't occurred
+        $element.on('click', function() {
+          $scope.clickHandler(slide, $index);
+        }
       }
     }
   })

diff --git a/01-template.html b/01-template.html
@@ -2,14 +2,18 @@
 
   <div class="carousel">
     <!--
-      Each slide needs to be both clickable and swipeable, with a mouse
-      (this problem does not happen on mobile). The problem I'm having
-      is that when you swipe with a mouse click, letting the mouse up at
-      the end of the swipe will trigger the click (which opens a modal).
-      I need the click to only be called if there no swipe happens. That
-      is what the swipe handler directive is there for, but I need to
-      trigger the parent scope's click handler from the directive's link
-      function. How do I do that?
+      I have a UI Bootstrap carousel with some slides in it. Each slide
+      needs to be both clickable and swipeable, with a mouse (this problem
+      is not an issue on mobile).
+      
+      The problem I'm having is that when you swipe with a mouse click,
+      letting the mouse up at the end of the swipe will trigger the click
+      (which opens a modal). I need the click to only be called if no swipe
+      happens. That is what the swipe handler directive is there for, but I
+      need to trigger the parent scope's click handler from the directive's
+      link function.
+
+      How do I do that?
     -->
     <div class="slide"
          swipe-handler-directive

diff --git a/template.html → 01-template.html b/template.html → 01-template.html
diff --git a/controller.js → 02-controller.js b/controller.js → 02-controller.js
diff --git a/swipe-handler-directive.js → 03-swipe-handler-directive.js b/swipe-handler-directive.js → 03-swipe-handler-directive.js
diff --git a/controller.js b/controller.js
@@ -0,0 +1,7 @@
+angular.module('myApp')
+  .controller('rootController', function($scope) {
+    $scope.clickHandler = function(item) {
+      // do something with 'item'
+    };
+  })
+;
diff --git a/swipe-handler-directive.js b/swipe-handler-directive.js
@@ -0,0 +1,13 @@
+angular.module('myApp')
+  .directive('swipe-handler-directive', function() {
+    return {
+      restrict: "A",
+      scope: {},
+      link: function($scope, $element, $attrs) {
+        // do all the mousedown/mousemove event handler stuff
+        // here, and call the parent scope's click handler
+        // from here, but only if a swipe hasn't occurred
+      }
+    }
+  })
+;
diff --git a/template.html b/template.html
@@ -0,0 +1,20 @@
+<div class="app-root" ng-controller="rootController">
+
+  <div class="carousel">
+    <!--
+      Each slide needs to be both clickable and swipeable, with a mouse
+      (this problem does not happen on mobile). The problem I'm having
+      is that when you swipe with a mouse click, letting the mouse up at
+      the end of the swipe will trigger the click (which opens a modal).
+      I need the click to only be called if there no swipe happens. That
+      is what the swipe handler directive is there for, but I need to
+      trigger the parent scope's click handler from the directive's link
+      function. How do I do that?
+    -->
+    <div class="slide"
+         swipe-handler-directive
+         ng-repeat="slide in slides track by $index"
+    ></div>
+
+  </div><!-- .carousel -->
+</div><!-- .app-root -->