Question

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

在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？

-r

Answer 1

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

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

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

1 个答案: