Jquery 角锤：将功能集成到现有控制器中

您好，谢谢您的光临

为了将Hammer.js2.x集成到Angular 1.x应用程序中，我已经被困了好几个小时。我采取了两种不同的方法：

首先，我尝试使用JQUERY和vanilla Hammer“直接”操作DOM元素，如下所示：

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);
});
});

编辑（这一部分现在只适用于一个元素）：我知道这远远不够完美，使用“mouseenter”毫无意义，因为它适用于所有“静态”和“ui视图”元素。或者至少是其中一个

所以我尝试了一种更复杂的方法，通过使用。这很有效，直到我重申我不能简单地遵循他们采用的简单方法，因为使用“hm-tap”的元素已经被控制器“sorrounded”。即messagesCtrl。所以，我试着把他们的代码放到已经存在的控制器中的一个新功能中，但这似乎不起作用。它甚至将“Delete process started”记录到控制台，但没有输入“Hammer（myElement）.on”（“tap”，function（ev）”。我想我可能缺少与$scope相关的内容

相关代码：

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>

现在我真的不知道问题出在哪里，下一步该怎么办，所以我想问你，谁对Angular有更多的经验

如果你想让我分享更多的代码，请告诉我。

---

感谢您的时间和帮助！

我遇到了完全相同的问题：/-您解决了吗？：PIm遇到了完全相同的问题：/-您解决了吗？：p