Swipe in ion-list not working like iOS swipe feature

ionic-v1
1

In the Messages app on my iPhone 6, when I swipe left on an item, I can either swipe right to go back or tap on the item to go back. The ion-list option for swiping does not allow me to “TAP” to go back. I am forced to swipe right to go back.

http://ionicframework.com/docs/api/directive/ionList/

How can I modify this behavior so that I can tap on an item to “go back”?

2

@gigocabrera You can close the itemOptions on ng-click using the list delegate service.

See codepen http://codepen.io/djett41/pen/yymebd

3

@djett you’re awesome dude. Thanks for the quick reply, but your solution solves half of my problem. Basically from your pen, if I swipe left I see the Edit and Share and if I tap on the item it closes the ItemOptions. However, if I just tap on an item I need to open another template with subitems.

When I tap on an item: If ItemOptions are showing -> then close itemOptions. If ItemOptions are not showing, open subtemplate with sub items

4

oops! you are right. What you want to do, is

  1. on click, get a reference to the .item-options container element within the clicked item (can use the target)
  2. check if the .item-options container HAS the invisible class (once you swipe left, ionic removes the invisible class)
  • If container does NOT have invisible class, then close using$ionicListDelegate as in codepen
  • else, do whatever was assigned to ng-click

This would probably be best to put in a directive since you will need to get jQlite references to elements. Let me know if that doesnt make sense :smile:

5

@gigocabrera I updated the codepen with the logic on how you would accomplish this but… DISCLAIMER this should NOT be in the controller but should be in a directive :wink: I just don’t want the Angular gods to come down on me at this point ha!

6

:flushed:
I’ve been playing around with the ionic framework for a week and although I’ve been able to put together a tiny little app that connects to Firebase as a backend, this is WAAAAYYYY out of my league and I never thought my issue would be this complicated.

If you can point me in the right direction on how to make this happen I would greatly appreciate it!!!

7

cool no prob, I would start by reading the angular docs for directives here . Then after you get the hang of creating directives, you can port the controller code from the codepen (I updated it to do what you wanted it to do on my last post) over to the directive.

Since you are decorating behavior (click behavior) you’re better off creating an attribute directive rather than an element directive that can take a function. The directive can do exactly what the controller does, check for invisible class on the item-options container, and if not there, close the options, otherwsie invoke the passed in function from the isolated scope.

This will all make sense after reading the directive docs and playing with the examples

Ideally

8

@djett thank you again for your help. I’ll take a look and reach out again if I get stuck

1 Like
9

@djett I finally got the concept of directives. Very nice! For my particular needs, and for anybody else looking at your codepen, I replaced

alert('This should be in a directive!!');

for this

$state.go('app.account');

and that did the trick for me. I can open the template referenced by the ‘app.account’ state.

As as for the Angular Gods, yeah they’ll come down on me too :stuck_out_tongue: