AngularJS + HammerJS + AngularUi：使用事件传递答案

【问题标题】：AngularJS + HammerJS + AngularUi: Using event passthroughAngularJS + HammerJS + AngularUi：使用事件传递
【发布时间】：2013-05-27 04:45:31
【问题描述】：

以下代码假设使用 AnguarUI 的 Event 指令来传递 HammerJS 事件，但它不起作用。我显然错过了一些东西，但不明白到底是什么。没有抛出任何错误。

<!doctype html>
<html ng-app="myapp"  charset="UTF-8">
    <head>
         <meta charset="utf-8"> 
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
         <script type="text/javascript" src="https://raw.github.com/angular-ui/ui-utils/master/modules/event/event.js"></script>
         <script type="text/javascript" src="https://raw.github.com/EightMedia/hammer.js/v1.0.5/dist/hammer.min.js"></script>
         <style type="text/css">
            div {
                width: 100%;
                height: 100%;
            }
         </style>
    </head>
    <body ng-controller="pageCtrl">
        <div ui-event="{ tap: 'tapCallback()' }"></div>
        <script type="text/javascript">
            angular.module('myapp', ['ui.event']);
            function pageCtrl($scope) {
                $scope.tapCallback = function() {
                    alert("test");
                }
            }
         </script>
    </body>
</html>

【问题讨论】：

标签： angularjs angular-ui hammer.js

【解决方案1】：

ui-events 使用elm.bind 附加它的监听器。

Hammer.js 没有任何依赖项，默认情况下它不会将自身添加到 jQuery。
您可以包含一个 jQuery 插件来将 Hammer.js 和 jQuery 集成在一起。

在您发布的代码中，您没有该插件。 (here's a link to Hammer.js + jQuery Plugin)

但话说回来，你的页面中甚至没有 jQuery，我不确定该插件是否适用于 angular 的 jqLite。

您可以通过使用Angular Hammer（您应该使用）来避免所有问题
Even the Hammer.js wiki links to it

【讨论】：

ui-event 不需要 jQuery（也不再需要任何 ui-utils。但是，您仍然需要发出 jquery-events，所以这仍然是一个有效的答案。