跟踪 angularjs 中的元素绑定和事件状态

Question

我有一个 Angular 应用程序，其行为如下：

• 在mousedown 上发送一个请求，返回代表更新对象的 JSON 数据。
• 当事件仍然处于活动状态时，元素会使用接收到的数据重新呈现。
• mouseup 再次发送请求，接收 JSON 并再次呈现元素。

我通过这样的指令实现了这个：

var PRESS_EVENT = 'mousedown';
var RELEASE_EVENT = 'mouseup';

app.directive('ngPress', function() {
    return {
        restrict: 'A',
        link: function($scope, $element, $attributes) {
            $element.bind(PRESS_EVENT, function(event) {
                $scope.$eval($attributes.ngPress);
            });
        }
    };
});

app.directive('ngRelease', function() {
    return {
        restrict: 'A',
        link: function($scope, $element, $attributes) {
            $element.bind(RELEASE_EVENT, function(event) {
                $scope.$eval($attributes.ngRelease);
            });
        }
    };
});

模板代码如下：

<div data-ng-press="press(uid)"
     data-ng-release="release(uid)">
    ...
</div>

虽然这在正确触发 mousedown 和 mouseup 的浏览器中运行良好，但在带有触摸屏的设备上运行失败，其中 touchstart 和 touchend 是这些事件的替代品（几乎，请继续阅读）。

如此处所述 - http://lists.w3.org/Archives/Public/public-webevents/2012OctDec/0023.html - touchend 承诺在触发它的同一元素上触发 - 实际上是由于重新渲染而刚刚删除的元素，它也不会冒泡 DOM，因为有不再有父元素。

现在我正在寻找一种方法来跟踪已删除的元素 - 要么保留它，除非 touchend 发生，或者将实际事件状态转移到引用的新元素。

现在我想在 ngPress 注册一个销毁监听器来完成这项工作：

var PRESS_EVENT = 'touchstart';
var RELEASE_EVENT = 'touchend';

app.directive('ngPress', function() {
    return {
        restrict: 'A',
        link: function($scope, $element, $attributes) {
            $element.bind(PRESS_EVENT, function(event) {
                $scope.$eval($attributes.ngPress);
            });
            $scope.$on('$destroy', function() {
                // do my fancy magic here
            });
        }
    };
});

...

如何在重新渲染后访问相关的事件处理程序和/或事件状态以供以后重用，或者如何让元素按预期收听touchend？

Answer 1

实现了一个指令来控制触摸事件，它是 ngTouch。您可以在此处找到更多信息：

http://docs.angularjs.org/api/ngTouch