angularJS 實現移動端 觸摸事件Touchstart Touchend

angular 移動端開發,啓用ngTouchstart,ngTouchmove,ngTouchendapp

1.自定義指令code

.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頁面上調用element

<div ng-touchstart="startTouch()" ng-touchend="endTouch()">

3.在controller,js 中寫startTouch,endTouch的方法邏輯開發

相關文章
相關標籤/搜索