Ionic $ ionicGesture gesture (big pitfall), ionicionicgesture

Ionic $ ionicGesture gesture (big pitfall), ionicionicgesture

I did not use the ionic framework before I came to our company, but because ionic is encapsulated based on angularjs, I used angularjs, and I am honored to have passed the interview, and then through the site http://www.ionic.wang (hereinafter referred to as the site I) Learn ionic side to do the project.

The pitfall that ionic has just stepped on -- $ ionicGesture! I want to summarize $ ionicGesture and hope it will be helpful for the children's shoes that use this framework!

Website I introduces $ ionicGesture as follows:

Add an event listener to an element.

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

Remove a gesture event listener from an element.

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

Parameter introduction:

Parameter Type Details: The gesture event that the eventType string listens. Callback function (e) events triggered when a gesture event occurs. $ Event monitored by the element angular element

The introduction to $ ionicGesture in website I does not mean that I do not need it. The. on () method is correct, and the. off () parameter is incorrect!

Here, the off () method is based on the introduction of website I. It won't work for a long time. Then, press alt and click $ ionicGesture. off. Check the source code so that you can know that this method is wrong when website I is introduced.

The summary is as follows:

$ IonicGesture service -- register/cancel a gesture event listener register a gesture event listener Function

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

The on () method returns an ionic. gesture object for unlistening.

Parameter introduction:

• The eventType parameter is a supported event type;
• The callback parameter specifies the listener function;
• The $ element parameter is the jqLite element of the event to be bound;
• The options parameter is a sub-object options of the on Method returned object.

Function for canceling gesture event listening

$ionicGesture.off(gesture,eventType,callback)

Parameter introduction:

• The gesture parameter is the result object returned by the on () method;
• The eventType parameter is a supported event type;
• The callback parameter is the listener function to be removed.

Note:The default parameter event of canllback is described later in the code.

$ The ionicGesture Service supports the following event types:

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

For example:

Structural layer:

<Div> <p> Registration and gesture relief events are all in order, first, button1 registers an event in button2 </p> <p> click bind once. </p> <button ng-click = "add () "> bind </button> <p> click unbind once to release the event </p> <button ng-click =" delete () "> unbind </button> <br> <button id =" idCardNick "> idCardNick button1 </button> <br> <button id =" licenseNick"> licenseNick button2 </button> </div>

Just to achieve simple results, the style is better!

Effect:Bind, unbind button registration, release gesture events, are in order, first button1 in button2.

Behavior layer: Public method written at the end

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

Listening functions of. on () and. off ()

Function clickFn (ev, idx) {// here, the default arguments is the event custom parameter idx and cannot be obtained ?? Console. log (arguments); console. log (idx); // undefined console. log ($ scope. idx); // This way, idx objects can be obtained };

Note that the default parameter event of the listener function is as follows:

function clickFn(idx){　　……    }      

In this way, I am stuck in writing, and then I pile up console. log (idx); the result is printed as event, so I can leave it alone!

Listen to data. length to dynamically add and delete click events

$ 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 {// destroy watch unbindWatch ();} console for performance when not in use. log (clickGesture0 );});

Add the listener gesture function AddclickFn, which is written in 2.

Statement 1:

Function AddclickFn (selector, idx) {return $ ionicGesture. on ('click', function () {console. log (arguments); console. log (idx); // you can obtain idx}, angular. element (document. querySelector (selector )));};

Write $ ionicGesture in this way. the on () Listening function callback can obtain the idx parameter, but write $ ionicGesture in this way. off (), the callback listening function cannot be removed, so I wrote the second method.

Statement 2:

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

Save idx to options. idx and save it as an object to $ scope. idx, so that clickFn can use $ scope. idx. idx, that is, the value of idx.

　Although writing two statements can achieve the effect, I always feel that writing is not good. I hope some Daniel can give me some suggestions and leave a message or contact me via qq. Thank you!

Remove the gesture listening function:

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

I added comments to all the points that need attention and added the complete code:

<! DOCTYPE html> I can't help myself. I hope some Daniel can give me some suggestions and leave me a message or contact me via qq. Thank you!