鄙人来本公司前未用过ionic框架，但由于ionic是基于angularjs封装的，正好我用过angularjs，很荣幸的面试就过了，然后通过该网站（后面简称网站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.on(eventType, callback, $element)

参数介绍：

$ionicGesture.off(gesture,eventType,callback)

　　参数介绍：

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

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>idCardNick button1</button><br><br> <button>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(); };

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

function clickFn(idx){ 　　…… }

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

　　$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监听函数了，所以我写成了第二种写法。