鄙人來本公司前未用過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聯系，多謝！