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

        }]
    }
});

  

原文地址:https://www.cnblogs.com/zion0707/p/4916345.html