AngularJS ngTouch 插件,替代原来的ng-click
很多时候,我们会用 AngularJS 开发移动端页面,制作移动端页面肯定是离不开,touchstart , touchmove , touchend 这些动作,但是AngularJS 提供的ng-touch 模块并不是ngtouchstart 这种触屏事件,使点击延迟了,所以今天介绍的是由 国外人员写的另一个ng-touch ,实现移动端的touchstart,touchmove,touchend 这些事件
使用方式,照旧,引入以下代码,然后再注入这个模块 ngTouch ,只需要把 ng-click 改成 ng-touchstart 就可以了
"use strict"; angular.module("ngTouch", []) .directive("ngTouchstart", function () { return { controller: ["$scope", "$element", function ($scope, $element) { $element.bind("touchstart", onTouchStart); function onTouchStart(event) { var method = $element.attr("ng-touchstart"); $scope.$event = event; $scope.$apply(method); } }] } }) .directive("ngTouchmove", function () { return { controller: ["$scope", "$element", function ($scope, $element) { $element.bind("touchstart", onTouchStart); function onTouchStart(event) { event.preventDefault(); $element.bind("touchmove", onTouchMove); $element.bind("touchend", onTouchEnd); } function onTouchMove(event) { var method = $element.attr("ng-touchmove"); $scope.$event = event; $scope.$apply(method); } function onTouchEnd(event) { event.preventDefault(); $element.unbind("touchmove", onTouchMove); $element.unbind("touchend", onTouchEnd); } }] } }) .directive("ngTouchend", function () { return { controller: ["$scope", "$element", function ($scope, $element) { $element.bind("touchend", onTouchEnd); function onTouchEnd(event) { var method = $element.attr("ng-touchend"); $scope.$event = event; $scope.$apply(method); } }] } });