鄙人来本公司前未用过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介绍该方法错了。
现整理汇总如下：
参数介绍：
参数eventType是支持的事件类型；参数callback指定监听函数；参数$element是要绑定事件的jqLite元素；参数options是on方法返回对象的一个子对象options。参数介绍：
参数gesture是on()方法返回的结果对象；参数eventType是支持的事件类型；参数callback是要移除的监听函数。注意：canllback默认参数event，后面代码有提到。
举个例子：
只为实现简单的效果，样式比较呵呵！
效果:bind、unbind按钮注册、解除手势事件，都是按顺序，先button1在button2。
这样写坑死我啦，后来打桩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中写法
这样写$ionicGesture.on()的监听函数callback就可以获取参数idx，但是这样写$ionicGesture.off()就不能解除callback监听函数了，所以我写成了第二种写法。
将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联系，多谢！
