我有一个行为如下的 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
?
最佳答案
实现了一个指令来控制触摸事件,它是 ngTouch。您可以在此处找到更多信息:
关于javascript - 在 angularjs 中跟踪元素绑定(bind)和事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21219186/