Accesso all'elemento cliccato in angularjs


173

Sono relativamente nuovo in AngularJS e sospetto di non capire un concetto. Sto anche usando Twitter Bootstrap e ho jQuery caricato.

Flusso di lavoro: l'utente fa clic su un collegamento da un elenco, la sezione "principale" viene aggiornata e il collegamento su cui l'utente fa clic su guadagna la classe attiva.

Markup HTML di base:

<ul class="list-holder" ng-controller="adminController">
   <li><a ng-click="setMaster('client')">Clients</li>
   <li><a ng-click="setMaster('employees')">Employees</li>
   <li><a ng-click="setMaster('etc')>Etc...</li>
</ul>

In questo modo in jQuery:

jQuery(".list-holder").on('click', 'a', function(event){
    event.preventDefault();
jQuery(".list-holder li").removeClass('active');
jQuery(this).parent('li').addClass('active');
});

Ma non riesco a capire come integrare Angular e jQuery per farlo, perché sto usando Angular per recuperare l'elenco principale (in formato JSON) dal server e aggiornare un elenco sulla pagina.

Come posso integrarlo? Non riesco a trovare l'elemento su cui ho fatto clic una volta all'interno della funzione del controller angolare

controller:

function adminController($scope)
    {    
        $scope.setMaster = function(obj)
        {
            // How do I get clicked element's parent li?
            console.log(obj);
        }
    }

Risposte:


283

Mentre AngularJS ti consente di dare una mano a un evento click (e quindi a un suo target) con la seguente sintassi (nota l' $eventargomento della setMasterfunzione; documentazione qui: http://docs.angularjs.org/api/ng.directive : ngClick ):

function AdminController($scope) {    
  $scope.setMaster = function(obj, $event){
    console.log($event.target);
  }
}

questo non è un modo molto angolare di risolvere questo problema. Con AngularJS l'attenzione è rivolta alla manipolazione del modello. Uno avrebbe mutato un modello e lasciato che AngularJS capisse il rendering.

Il modo AngularJS per risolvere questo problema (senza usare jQuery e senza la necessità di passare l' $eventargomento ) sarebbe:

<div ng-controller="AdminController">
    <ul class="list-holder">
        <li ng-repeat="section in sections" ng-class="{active : isSelected(section)}">
            <a ng-click="setMaster(section)">{{section.name}}</a>
        </li>
    </ul>
    <hr>
    {{selected | json}}
</div>

dove i metodi nel controller apparirebbero così:

$scope.setMaster = function(section) {
    $scope.selected = section;
}

$scope.isSelected = function(section) {
    return $scope.selected === section;
}

Ecco il jsFiddle completo: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/


198
FYI: $ event non funziona a meno che non sia passato nel markup: ng-click="setMaster(section, $event)"solo un avvertimento.
Ben Lesh,

4
Non proprio, deve essere passato alla funzione. In realtà, tuttavia, probabilmente non è la migliore idea fare riferimento a cose specifiche per dom come questa nel controller. Generalmente quando si usa $ event, è nel contesto di fermare la propagazione o simili: <a ng-click="doSomething(); $event.stopPropagation()">Click Just Me</a>
Ben Lesh

9
Ho avuto un problema con l'utilizzo di $ event.target perché avevo un'icona all'interno del mio pulsante. Quindi, a volte il risultato target è il pulsante e talvolta è l'icona (a seconda di dove ho cliccato). Ho usato $ event.currentTarget invece di target e ha funzionato come un fascino.
lao,

4
Anche se l'utilizzo in $event.targetquesto modo potrebbe non essere il "modo angolare", mi sembra di avere un grande ng-repeatelenco con ogni elemento che necessita di un ascoltatore per valutare un cambiamento non è efficace? Fare clic su un elemento significherebbe che ogni elemento dell'intero elenco deve essere rivalutato, giusto? - perché non $event.targetscegliere come target quell'elemento solo per attivare o disattivare una classe CSS, ad esempio. Cosa ne pensi? Sto lavorando su un'app Phonegap e ho bisogno di spremere ogni ottimizzazione delle prestazioni che posso.
Bradley Flood,

13
Vorrei anche raccomandare di utilizzare $event.currentTargetinvece di $event.target. Se l'elemento con ng-click ha elementi figlio, se si fa clic $event.targetsull'elemento figlio diventa l'elemento figlio. $event.currentTargetindirizzerà sempre l'elemento con il ng-clic designato.
Gene Parcellano,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.