Issue with tinder sample app - "disable-user-behavior"

ionic-v1
1

I was trying out experimenting with the sample Tinder App from your example codes from code pen.

When I tried adding a simple bookmark icon and wanted to add a on-tap functionality to that, it is not working.

There is a class added - “disable-user-behavior” for the DOM and the function never gets called. Can someone explain what should I do here?

Please find the codepen embed below.

Help!!

See the Pen Ionic Ion: Tinder Cards by Chaithanya Y (@ylchaithanya) on CodePen.

2

Can someone help me out with this please?!?

Thanks!

3

Hi,

If you move the $scope.cardBookmarked($index) function from CardCtrl to CardsCtrl (e.g. the parent scope), then the function is called when tapping the icon (both on-tap and ng-click can be used).

Regards,
Joost

4

Thanks @jvandewiel

It worked!! Can you let me know why this wouldn’t work when the function is in CardsCtrl? Its wrapped inside the same controller right?

5

Your are welcome. I think the reason is that the TDcard directive has it’s own controller and own scope (see in ionic.tdcards.js), and an on-tap/ng-click will call a function on that (directive) scope, not on the CardCtrl scope (which is a “child-scope”). The reason it works for the cardSwipedLeft/right() functions in the CardCtrl is via linking the directive functions in tdCard to the CardCtrl functions (this is done in the HTML part, using the on-swipe-left/right=cardSwipedLeft()/Right() declarations). If you happen to have chrome/chromium and Batarang, you can visualize the scope tree, and get some more insight in what is where.

Regards,
Joost