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联系，多谢！
