AngularJS + HammerJS + AngularUi:使用事件直通

时间:2013-05-27 04:45:31

标签: angularjs angular-ui hammer.js

以下代码假设使用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>

1 个答案:

答案 0 :(得分:4)

ui-events使用elm.bind附加其侦听器。

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

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

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

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