Saya memiliki klik Acara di baris tabel dan di baris ini ada juga Tombol hapus dengan klik Acara. Ketika saya mengklik tombol hapus, klik Acara di baris juga diaktifkan.
Ini kode saya.
<tbody>
<tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.email}}</td>
<td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td>
</tr>
</tbody>
Bagaimana saya bisa mencegah bahwa showUser
Acara dipecat ketika saya mengklik Tombol hapus di sel tabel?
javascript
angularjs
angularjs-ng-click
michael_knight
sumber
sumber
ng-click
fungsi handler:ng-click="deleteUser(user.id, $event)"
.$event.preventDefault()
juga, jika tidak menelepon berarti$event.stopPropagation()
mengarahkan saya ke root aplikasi saya ketika mengklik tombol.Tambahan untuk jawaban Stewie. Jika callback Anda memutuskan apakah propagasi harus dihentikan atau tidak, saya merasa berguna untuk meneruskan
$event
objek ke callback:Dan kemudian di dalam callback itu sendiri, Anda dapat memutuskan apakah propagasi acara harus dihentikan:
sumber
Saya menulis arahan yang memungkinkan Anda membatasi area di mana klik berpengaruh. Ini dapat digunakan untuk skenario tertentu seperti ini, jadi daripada harus berurusan dengan klik pada kasus per kasus, Anda bisa mengatakan "klik tidak akan keluar dari elemen ini".
Anda akan menggunakannya seperti ini:
Perlu diingat bahwa ini akan mencegah semua klik pada sel terakhir, bukan hanya tombol. Jika bukan itu yang Anda inginkan, Anda mungkin ingin membungkus tombol seperti ini:
Ini adalah kode arahannya:
sumber
ngClick
, karena saya sebenarnya tidak pernah ingin menyebarkan acara yang sudah ditangani.ignoreNgClick=true
ke acara dan menanganinya ... entah bagaimana. Idealnya, dalamngClick
arahan asli , tetapi memodifikasi itu terdengar kotor.Jika Anda menggunakan arahan seperti saya, ini adalah cara kerjanya ketika Anda membutuhkan dua cara pengikatan data misalnya setelah memperbarui atribut dalam model atau koleksi apa pun:
Sekarang, Anda dapat dengan mudah menggunakannya di sembarang tombol, tautan, div, dll. Seperti:
sumber
sumber