angularJS 모바일 터치 이벤트 구현Touchstart Touchend

1987 단어 angularjs
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

좋은 웹페이지 즐겨찾기