Can only apply on-tap to button, not to div


#1

Can anyone tell me why this works in the simulator:

<button ng-class="{'gc-alive': isAlive}" class="button" on-tap="cellClick()"></button>

but this doesn’t:

<div ng-class="{'gc-alive': isAlive}" class="gc-full-size" on-tap="cellClick()"></div>

#2

Does it work running on a real device? It doens’t throw a error?

But, try something like this workaround in your JS file:

angular.module('MyApp').directive('Tapped', ['$ionicGesture', function($ionicGesture) {
 
return {
    restrict: 'A',
    link: function($scope, $element, $attr) {

        $ionicGesture.on('tap', function(e) {
            console.log('I got Tapped!')
        }, $element);
    }
  }
}])

And your HTML:

<div tapped>Tap</div>

#3

Thanks @GabrielBarreto. The button works on the device as well as the simulator, and there are never any errors. But weirdly, the custom directive workaround is having the exact same effect. I just can’t get any response from a div.

Of course - I can just style a button to look like a div. I would just like to know why it’s happening!