ionic之$ionicGesture手势（大坑）

　　鄙人来本公司前未用过ionic框架，但由于ionic是基于angularjs封装的，正好我用过angularjs，很荣幸的面试就过了，然后通过该网站http://www.ionic.wang（后面简称网站i）边学ionic边做项目。

　　ionic刚踩过的坑--$ionicGesture！现总结下$ionicGesture,希望对用到该框架的童鞋有所帮助！

　　网站i对$ionicGesture的介绍如下：

　　在一个元素上添加一个事件监听器。

$ionicGesture.on(eventType, callback, $element)

　　在一个元素上移除一个手势事件监听器。

$ionicGesture.off(eventType, callback, $element)

　　参数介绍：

    参数              类型                详情
eventType           string         监听的手势事件。
callback          function(e)    当手势事件发生时触发的事件。
$element           element       angular元素监听的事件

　　网站i这对$ionicGesture的介绍把我坑的不要不要的，.on()方法没错，.off()参数不对啊！

　　这里的off()方法我按网站i的介绍做完，弄了好久都不行，后来按住alt点击$ionicGesture.off进去看源码是这样的才知道网站i介绍该方法错了。

　　现整理汇总如下：

$ionicGesture服务--注册/解除手势事件监听

　　注册手势事件监听函数

$ionicGesture.on(eventType, callback, $element)

on()方法返回的是一个ionic.gesture对象，可供解除监听用。

参数介绍：

• 参数eventType是支持的事件类型；
• 参数callback指定监听函数；
• 参数$element是要绑定事件的jqLite元素；
• 参数options是on方法返回对象的一个子对象options。

　　解除手势事件监听函数

$ionicGesture.off(gesture,eventType,callback)

　　参数介绍：

• 参数gesture是on()方法返回的结果对象；
• 参数eventType是支持的事件类型；
• 参数callback是要移除的监听函数。

注意：canllback默认参数event，后面代码有提到。

　　$ionicGesture服务支持的事件类型有：

hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch, release

举个例子：

结构层：

<div>
     <p>注册、解除手势事件都是按顺序，先button1在button2</p>
     <p>点击bind一次button注册一次事件</p>
     <button ng-click="add()">bind</button>
     <p>点击unbind一次button解除一次事件</p>
     <button ng-click="delete()">unbind</button><br><br>
     <button id="idCardNick">idCardNick button1</button><br><br>
     <button id="licenseNick">licenseNick button2</button>
   </div>

　　只为实现简单的效果，样式比较呵呵！

　　效果:bind、unbind按钮注册、解除手势事件，都是按顺序，先button1在button2。

行为层：

　　写在末尾的公用方法

        $scope.add=function(){
             if($scope.data.length<2){$scope.data.push('nick');}
           };
           $scope.delete=function(){
             $scope.data.pop();
           }; 

　　.on()和.off()的监听函数

    function clickFn(ev,idx){
             //这里默认的arguments是event 自定义的参数idx无法获取？？
             console.log(arguments);
             console.log(idx);//undefined
             console.log($scope.idx);//这样可以获取idx对象
           };

这里要注意的就是监听函数的默认参数event，我开始天真的写成下面这样

function clickFn(idx){
　　……
    }      

这样写坑死我啦，后来打桩console.log(idx);结果打印出来是event，我勒个去！

监听data.length动态添加删除click事件

　　$scope.data=[];
　　var clickGesture0,clickGesture1,unbindWatch;         
 　 unbindWatch=$scope.$watch('data.length',function(newval,oldval){
             if(newval==0){
               if(clickGesture0){OffclickFn(clickGesture0);}
               if(clickGesture1){OffclickFn(clickGesture1);}
             }else if(newval==1){
               clickGesture0=AddclickFn('#idCardNick',0);
               if(clickGesture1){OffclickFn(clickGesture1);}
             }else if(newval==2){
               clickGesture1=AddclickFn('#licenseNick',1);
             }else{//不用时为了性能销毁watch
               unbindWatch();
             }
             console.log(clickGesture0);
           });

添加监听手势函数AddclickFn这里有2中写法　　

　　写法一：

    function AddclickFn(selector,idx){
             return $ionicGesture.on('click',function(){
               console.log(arguments);
               console.log(idx);//这样可以获取idx
             },angular.element(document.querySelector(selector)));
           };

这样写$ionicGesture.on()的监听函数callback就可以获取参数idx，但是这样写$ionicGesture.off()就不能解除callback监听函数了，所以我写成了第二种写法。

　　写法二：

function AddclickFn(selector,idx){
             return $ionicGesture.on('click',clickFn,angular.element(document.querySelector(selector)),$scope.idx={idx:idx});
           };

　　将idx存入options.idx在作为对象存入$scope.idx，这样clickFn就可以使用$scope.idx.idx，即参数idx的值。

　　这里虽然写法二能实现效果，但我总感觉这样写不好，希望有大牛能给点建议，给我留言或者qq联系，多谢！

　　移除手势监听函数：

 function OffclickFn(clickGesture){
             $ionicGesture.off(clickGesture,'click',clickFn);
     };

我把需要注意的地方都加注释了，上完整代码：

<!DOCTYPE html>
<html ng-app="nickApp">
<head>
  <meta charset="utf-8" name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
  <script src="lib/ionic/js/ionic.bundle.min.js"></script>
  <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css">
</head>
<body ng-controller="nickCtrl">
   <div>
     <p>注册、解除手势事件都是按顺序，先button1在button2</p>
     <p>点击bind一次button注册一次事件</p>
     <button ng-click="add()">bind</button>
     <p>点击unbind一次button解除一次事件</p>
     <button ng-click="delete()">unbind</button><br><br>
     <button id="idCardNick">idCardNick button1</button><br><br>
     <button id="licenseNick">licenseNick button2</button>
   </div>
   <script>
/* http://www.ionic.wang/js_doc-index-id-58.html
on(eventType, callback, $element)
off(eventType, callback, $element)
参数            类型             详情
eventType     string     监听的手势事件。
callback      function(e) 当手势事件发生时触发的事件。
$element       element    angular元素监听的事件。*/

/*
//完整汇总：
$ionicGesture服务--注册/解除手势事件监听：
on(eventType,callback,$element,options) - 注册手势事件监听函数
参数eventType是支持的事件类型；
参数callback指定监听函数；
参数$element是要绑定事件的jqLite元素。
参数options是on方法返回对象的一个子对象options
on()方法返回的是一个ionic.gesture对象，可供解除监听用。
off(gesture,eventType,callback) - 解除手势事件监听函数
参数gesture是on()方法返回的结果对象，
参数eventType是支持的事件类型
参数callback是要移除的监听函数。
$ionicGesture服务支持的事件类型有：
hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch, release*/
     angular.module('nickApp',['ionic'])
       .controller('nickCtrl', ['$scope','$ionicGesture',
         function ($scope,$ionicGesture){
           $scope.data=[];
           var clickGesture0,clickGesture1,unbindWatch;

            //监听data.length动态添加删除click事件
           unbindWatch=$scope.$watch('data.length',function(newval,oldval){
             if(newval==0){
               if(clickGesture0){OffclickFn(clickGesture0);}
               if(clickGesture1){OffclickFn(clickGesture1);}
             }else if(newval==1){
               clickGesture0=AddclickFn('#idCardNick',0);
               if(clickGesture1){OffclickFn(clickGesture1);}
             }else if(newval==2){
               clickGesture1=AddclickFn('#licenseNick',1);
             }else{//不用时为了性能销毁watch
               unbindWatch();
             }
             console.log(clickGesture0);
           });

           /*function AddclickFn(selector,idx){
             return $ionicGesture.on('click',function(){
               console.log(arguments);
               console.log(idx);//这样可以获取idx
             },angular.element(document.querySelector(selector)));
           };*/
           function AddclickFn(selector,idx){//将idx存入options.idx在作为对象存入$scope.idx
             return $ionicGesture.on('click',clickFn,angular.element(document.querySelector(selector)),$scope.idx={idx:idx});
           };

           /*
           按住alt点击$ionicGesture.off进去看源码是这样的
           才知道ionic.wang这网站介绍gusture方法错了
           off: function(gesture, eventType, cb) {
             return window.ionic.offGesture(gesture, eventType, cb);
           }*/

           $scope.add=function(){
             if($scope.data.length<2){$scope.data.push('nick');}
           };
           $scope.delete=function(){
             $scope.data.pop();
           };

           function clickFn(ev,idx){
             //这里默认的arguments是event 自定义的参数idx无法获取？？
             console.log(arguments);
             console.log(idx);//undefined
             console.log($scope.idx);//这样可以获取idx对象
           };
           function OffclickFn(clickGesture){
             $ionicGesture.off(clickGesture,'click',clickFn);
           };

         }]);

   </script>
</body>
</html>

再唠叨下：上面写法二我总感觉不好，希望有大牛能给点建议，给我留言或者qq联系，多谢！