Ho un problema interessante con la direttiva uiSref
e non sono stato in grado di trovare una soluzione (benché elegante in ogni caso) ovunque sul web. Fondamentalmente ho un requisito da un client per poter fare clic su una riga in una tabella di risorse e andare alla vista di modifica per quella risorsa. Normalmente la direttiva uiSref
funziona magnificamente, ma il problema risiede nel fatto che ho un dropdown Bootstrap nell'ultimo della tabella con un sacco di azioni rapide in esso. Il codice HTML simile a questa:UI-Router angolare ui-sref ignora alcuni elementi
<table class="table table-bordedered table-hover">
<thead>
<tr>
<td>Name</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="resource in resources" ui-sref="edit({id: resource.id})">
<td ng-bind="resource.name"></td>
<td class="actions-column">
<div class="btn btn-xs btn-default" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</div>
<ul class="dropdown-menu pull-right">
<li>
<a href="javascript:void(0)" ng-click="doSomethingCrazy(resource)">SOMETHING CRAZY</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
Il problema è che quando clicco sul pulsante nella colonna delle azioni, il uiSref
sovrascrive l'azione predefinita del menu a discesa e mi porta alla pagina di modifica. Ora potresti chiederti "bene è facile, perché non puoi semplicemente interrompere la propagazione dell'evento!?" ... non funziona. Quando aggiungo questo alla colonna di azioni:
<td class="actions-column" ng-click="$event.stopPropagation()">
uccide la funzionalità del menu a discesa e non appare nulla. In questo momento ho una soluzione in luogo in cui mi definisco un ngClick
sull'elemento <tr>
che poi decifra in cui lo Stato dovrebbe andare a seconda dell'elemento cliccato in questo modo:
<tr ng-repeat="resource in resources" ng-click="goToEdit(resource, $event)">
And The JS si presenta così:
scope.goToEdit = function(resource, event) {
// if the event.target has parent '.actions-column' or is that column, do nothing else
// invoke $state.go('edit', {id: resource.id})
}
Lo odio però e ho un sacco di visualizzazioni di lista come questo. Tutto quello che sto cercando è una soluzione elegante e portatile che si spera possa funzionare in modo nativo attraverso l'UI Router come $event.stopPropagation()
(Anche se ho cercato attraverso l'origine del router UI e non riesco a trovare un'alternativa praticabile). Fondamentalmente voglio avere la mia torta e mangiarla anch'io. Ad ogni modo, sarà interessante vedere che cosa può fare la community SO o se ciò che sto chiedendo non è attualmente possibile. Grazie!
più 1 per la domanda ben scritta e $ event.stopPropagation() che ha risolto il mio caso (utilizzo BUTTON, non A) –