天天看點

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

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

        }]
    }
});