我创建了一个应用程序,使用户能够双击要编辑的项目。我想在移动设备上允许相同的功能,这意味着用户可以双击来编辑项目。
实现它的最简单方法是什么?我宁愿不使用任何额外的库(我听说过 Hammer 和 AngularTouch,但之前都没有使用过)和 jQuery(在我的应用程序中我完全放弃了 jQuery)。
如果实现它的唯一方法是使用库,那么什么是最轻量级和最简单的?
非常感谢
编辑:添加代码 这是我用于编辑项目的 Controller :
// Double click to edit products
$scope.editItem = function (item) {
item.editing = true;
};
$scope.doneEditing = function (item) {
item.editing = false;
$http.put('/api/users?id' + $scope.User.id, $scope.User);
};
$scope.cancelEditing = function (item) {
item.editing = false;
};
$scope.deleteItem = function (item) {
delete $scope.User.todos[item.id];
$http.put('/api/users?id' + $scope.User.id, $scope.User);
};
这是我的模板 (Jade)
p(ng-dblclick="editItem(todo)", ng-hide="todo.editing").todo-title
span {{todo.content}}
form(ng-submit="doneEditing(todo)" ng-show="todo.editing", class="inline-editing-2")
input(type="text", class="form-control", ng-model="todo.content")
div.btn-block
button(class="btn btn-success mr-1", ng-show="todo.editing", ng-click="cancelEditing(todo)")
span(ng-click="doneEditing(todo)").fa.fa-check-circle
button(class="btn btn-warning mr-1", ng-show="todo.editing", ng-click="cancelEditing(todo)")
span(ng-click="cancelEditing(todo)").fa.fa-times-circle
如您所见,我使用 ng-doubleclick 来触发我的函数。我需要像 ng-double-tab 这样的东西来启动双击。我一直在阅读有关 Hammer 的更多信息,并将使用 Angular Hammer双击,但我不确定它是如何工作的...
最佳答案
您可以使用 ios-dblclick
,这是我编写的一个指令,用于处理移动浏览器上的双击事件(为 iOS 编写,但适用于其他浏览器)。它没有依赖性并且像 ng-dblclick
一样工作。
可用here on Github .
举个例子
<div ios-dblclick="removePhoto()"></div>
这是指令的代码
app.directive('iosDblclick',
function () {
const DblClickInterval = 300; //milliseconds
var firstClickTime;
var waitingSecondClick = false;
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function (e) {
if (!waitingSecondClick) {
firstClickTime = (new Date()).getTime();
waitingSecondClick = true;
setTimeout(function () {
waitingSecondClick = false;
}, DblClickInterval);
}
else {
waitingSecondClick = false;
var time = (new Date()).getTime();
if (time - firstClickTime < DblClickInterval) {
scope.$apply(attrs.iosDblclick);
}
}
});
}
};
});
关于javascript - 如何在 Angular Js 应用程序上启用双击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23199179/