web-dev-qa-db-ja.com

イオンアイテム内の要素のクリックを検出するにはどうすればよいですか？

Ion-listとion-itemを使用すると、ボタンやdivなどの要素のタップを検出できません。

たとえば、ng-clickの使用はここでは機能しません。

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

代わりにion-option-buttonを使用してみましたが、使用するのは簡単ではありません。

イオンアイテム内のクリックを検出するための単純なion-buttonディレクティブがないのはなぜですか？

ionic-frameworkionic
7
matdev

したがって、問題はion-itemが内部のdivのz-indexを変更することに関係しており、クリックは伝播できません。あなたはそれを簡単に回避することができます、内側のdivのz-indexを変更してください：

<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');
  };
})

Playgroundを参照してください： http://play.ionic.io/app/6227e101719b

3
Jess Patton

enable-pointer-eventsクラスを追加する必要があります。

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

私は同じ問題を抱えていました

「ng-click」の代わりに「on-tap」を使用すると、問題が解決しました。

2
Qi CHEN

これまでで最も簡単な方法！イベントを「オンタップ」に変更するだけです

<ion-list>
          <ion-item ng-repeat="device in devices">
              <div on-tap="deviceOption(device.id)"> CLICK HERE</div>                                            
          </ion-item>
</ion-list>
0
Safvan CK