Question

你好，感谢你们停下来，

我试图将Hammer.js 2.x集成到我的Angular 1.x应用程序中已经停留了好几个小时。我采取了两种不同的方法：

首先，我尝试使用JQUERY和vanilla Hammer尝试操作DOM元素＆＃34;直接＆＃34;像这样：

jQuery(document).on("mouseenter", document, function () {
console.log("go");

var myElement = jQuery("ui-view .message-wrap");
console.log(myElement[0]);

// listen to events...
Hammer(myElement[0]).on("tap press swipeleft", function(ev) {
    console.log(ev.type);
});
});

编辑（此部分现在适用于一个元素）：我知道这远非完美，而是使用＆＃39; mouseenter＆＃39;绝对没有意义，因为它适用于所有＆＃34;静态＆＃34;和＆＃34; ui-view＆＃34;元素。或者至少其中一个。

所以我尝试了一种更复杂的方法，通过使用AngularHammer将Hammer直接集成到Angular中。这很有效，直到我重新定位，我不能简单地遵循他们在简单demo上采用的方法，因为使用＆＃34; hm-tap＆＃34;的元素已经是＆＃34; sorrounded＆＃34;由控制器。即messagesCtrl。所以，我试图将他们的代码放入已经存在的Controller中的新功能中，但这似乎不起作用。它甚至可以记录＆＃34;删除过程开始＆＃34;到控制台，但没有输入＆＃34; Hammer（myElement）.on（＆＃34;点击＆＃34;，功能（ev）＆＃34;。我想我可能会遗漏一些与$范围。

相关守则：

app.js：

angular
.module('angularfireSlackApp', [
'firebase',
'angular-md5',
'ui.router',
'hmTouchEvents' ])
.config(function ($stateProvider, $urlRouterProvider) {
.state('channels.messages', {
        url: '/{channelId}/messages',
        templateUrl: 'channels/messages.html',
        controller: 'MessagesCtrl as messagesCtrl',
        resolve: {
            messages: function ($stateParams, Messages) {
                return Messages.forChannel($stateParams.channelId).$loaded();
            },
            channelName: function ($stateParams, channels) {
                return '#' + channels.$getRecord($stateParams.channelId).name;
            }
        }
    })

messages.controller.js

angular.module('angularfireSlackApp')
.controller('MessagesCtrl', function ($scope, profile, channelName, messages) {
    var messagesCtrl = this;
messagesCtrl.deleteMessage = function () {
        console.log(messagesCtrl);
        console.log("Delete process started");
        var myElement = document.getElementById('workxx');
        //console.log(myElement);
        console.log($scope.eventType);
        Hammer(myElement).on("tap", function (ev) {
            console.log(myElement);
            console.log(ev.type);
        });
    };

messages.html：

<div class="message" ng-show="message.image">
<img src="{{ message.image }}" id="workxx" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" hm-tap="messagesCtrl.deleteMessage()">
</div>

Rigt现在我在某个地方，我真的不知道问题出在哪里以及下一步该做什么，所以我想问你，谁有更多的Angular经验

如果您希望我分享更多代码，请告诉我们。感谢您的时间和帮助！

Angular-Hammer：将功能集成到现有的Controller中

0 个答案: