The only Thing thatās still missing, is that ng-click on the item now still triggers when you ājustā click/tap the button, could we prevent this from bubbling?
See what I mean here, when you click on the āphoneā icon, it still executes the alert of the item ng-click.
@iwantwin good point! You could use the stopPropagation() method. Unfortunately this doesnāt seem to work when binding the ātapā event with $ionicGesture. But if you bind the standard āclickā event to the button element, the stopPropagation() works perfectly. See the codepen example below:
You just made my day Exactly as I intended to have it work! This should be included into ionic frameworkā¦ Itās really an addition to the already great functionallity!
Iām way to inexperienced with writing directivesā¦ Gotta practice on that
One more problemā¦ When opening with the button, the item stays open. If you swipe the item to open the option buttons, the previous item is closed.
Question:
The items opened with the button, should close all previously opened items. (I could do this myself)
Toggling the button should close any item that was opened with the swipe opening for the option buttons (No clue how to interact with this existing directive)
Swiping an items hould close any items that were opened with the button (No clue how to interact with this existing directive)
Could you do this or send me to some resource explaining how to do this? Not only would it be very nice, it would increase my understanding of directive development as well
@iwantwin Sorry for not replying earlier, but I had to solve other problems with my app first
Iāve build a rough example how this could be done using a parent directive that broadcasts an event to all the items to close when one is clicked:
Itās working so for now you could adapt my solution but it seems pretty wrong and overcomplicated which is why I created a question on stackoverflow to get some help.
Aww dave, youāre awesome for coming back at this! No problem for the waitā¦ It was already working perfectly, functionally it was perfect, this is ājustā a nice finishing touch, (which is pretty important for user experience, but functionality is just more important ;))
Dave, thanks for the great work. I hate to bug you one more time on this topic, but do you know of a way to close the open options when a user swipes on an item? For instance, if I click on an item now and then click on a second, the first options list closes. However, if I click on an item and then swipe on another, the first options list stays open.
@flavordaaave
Thanks for your solution to open the option buttons using tap
I am developing application using ionic on windows phone 8.
First issue that i face was scrolling, i was unable to scroll ion-list. I fixed it by putting overflow-scroll=ātrueā attribute in āion-contentā tag, and list started to scroll. There is ion-list in āion-contentā and each item has option buttons(need to be show on swipe).
By fixing my scrolling issue i am not able to swipe list item. list-item is not swiping.
but when i remove overflow-scroll=ātrueā from āion-contentā tag, then swipe start working for list item but scrolling stop working
I am not facing any difficulty like this in android and ios, in both scroll and swipe is working fine, But not working in windows phone 8
For this i use your solution and now it working for me.so scroll as well as on swipe i am showing the option button. But after use this solution my scrolling of ion-list is too slow down and sticky.
It was working fine before. have you any idea why this happens.
Hey guys,
Any chance thereās a way to toggle the swipe only when clicking on the avatar image?
Iād like to have the area right of the image do something elseā¦
See example -
Hi,
Any chance thereās a way to have an image to the left of the text which enables the option buttons? -
I tried adding the directive to an image tag with no luckā¦
You could just attach the tap event to the image instead of the whole item with something like this:
// Get the avatar image element
var avatar = element[0].querySelector('.avatar');
// Change the open attribute on tap
avatar.addEventListener('tap', function(e) {
clicked = true;
if (attrs.optionButtons == 'show') {
attrs.$set('optionButtons', 'hidden');
} else {
attrs.$set('optionButtons', 'show');
}
}, false);