Mam zdarzenie kliknięcia w wierszu tabeli, aw tym wierszu znajduje się również przycisk usuwania ze zdarzeniem kliknięcia. Kiedy klikam przycisk Usuń, klikane jest również zdarzenie w wierszu.
Oto mój kod.
<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>
Jak mogę zapobiec showUser
uruchamianiu zdarzenia po kliknięciu przycisku usuwania w komórce tabeli?
javascript
angularjs
angularjs-ng-click
michael_knight
źródło
źródło
ng-click
funkcji obsługi:ng-click="deleteUser(user.id, $event)"
.$event.preventDefault()
też dodać , w przeciwnym razie wywołanie$event.stopPropagation()
przekierowało mnie do katalogu głównego mojej aplikacji po kliknięciu przycisku.Dodatek do odpowiedzi Stewiego. W przypadku, gdy Twoje wywołanie zwrotne decyduje, czy propagacja powinna zostać zatrzymana, uznam za użyteczne przekazanie
$event
obiektu do wywołania zwrotnego:A następnie w samym wywołaniu zwrotnym możesz zdecydować, czy propagacja zdarzenia powinna zostać zatrzymana:
źródło
Napisałem dyrektywę, która pozwala ograniczyć obszary, w których kliknięcie ma wpływ. Może być stosowany w niektórych scenariuszach, takich jak ten, więc zamiast zajmować się klikaniem w poszczególnych przypadkach, możesz po prostu powiedzieć „kliknięcia nie wyjdą z tego elementu”.
Użyłbyś tego w ten sposób:
Pamiętaj, że zapobiegnie to wszelkim kliknięciom ostatniej komórki, a nie tylko przycisku. Jeśli nie tego chcesz, możesz zawinąć przycisk w ten sposób:
Oto kod dyrektywy:
źródło
ngClick
, ponieważ tak naprawdę nigdy nie chcę propagować już obsłużonego zdarzenia.ignoreNgClick=true
do wydarzenia i obsłużyć ją ... jakoś. Idealnie, w pierwotnejngClick
dyrektywie, ale modyfikacja go zabrzmi.W przypadku korzystania z dyrektywy takiej jak ja działa to tak, gdy potrzebujesz powiązania dwóch danych, na przykład po zaktualizowaniu atrybutu w dowolnym modelu lub kolekcji:
Teraz możesz go łatwo używać w dowolnym przycisku, linku, div itp. W następujący sposób:
źródło
źródło