angularJs ng-touch ng-touchmove ng-touchstart ng-touchend

来源：互联网发布：为知笔记插件编辑：程序博客网时间：2024/06/12 03:13

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.$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.$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.$apply(method);            }        }]    }});

1 0