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); } }] }});