How to detect clicks on an element inside an ion-item?

Question

Using ion-list and ion-item, I am unable to detect a tap on an element such as a button or a div.

For exemple, using ng-click doesn't work here:

<ion-list>
      <ion-item ng-repeat="device in devices">
          <div ng-click="deviceOption(device.id)"> CLICK HERE</div>                                            
      </ion-item>
</ion-list>

I have tried using ion-option-button instead but it is not straigthforward to use.

Why can't we have a simple ion-button directive for detecting clicks inside ion-item ?

Solution 1

So the issue has to do with the ion-item changing the z-index of the inner div and the click cannot propagate through. You can get around it easily, change the z-index of the inner div:

<ion-content class="padding">
  <ion-list>
    <ion-item >
      <div style="z-index: 1000;" ng-click="test()"> CLICK HERE</div>                                            
    </ion-item>
  </ion-list>
</ion-content>

angular.module('app', ['ionic']).controller('ctrl', function($scope){
  $scope.test = function(){
    alert('hello');
  };
})

See Playground: http://play.ionic.io/app/6227e101719b

Solution 2

Adding enable-pointer-events class should do it.

<ion-list>
  <ion-item ng-repeat="device in devices">
      <div class="enable-pointer-events" ng-click="deviceOption(device.id)"> CLICK HERE</div>                                            
  </ion-item>

Solution 3

I had the same issue

Using 'on-tap' instead of 'ng-click' solved the problem!

Comments

[matdev]

Indeed, ng-click doesn't work here

[Bruno Casali]

For future searchers: my problem was the $scope, not the z-index.

[MobileEvangelist]

does the same thing happens with the <ion-scroll> as well. I want to click on ion-scroll box and inner items as well?