javascript - 在 angularjs 中跟踪元素绑定(bind)和事件状态

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 promise 在它被触发的同一元素上被触发 - 实际上是由于重新渲染而刚刚删除的那个元素，它也不会在 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