angularJS 实现移动端 触摸事件Touchstart Touchend

angular 移动端开发,启用ngTouchstart,ngTouchmove,ngTouchend

1.自定义指令

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

             }

         }]

     }

 })

2.HTML页面上调用

3.在controller,js 中写startTouch,endTouch的方法逻辑

你可能感兴趣的:(angularjs)