Accesso all'elemento selezionato in angularjs

Question

Sono relativamente nuovo per AngularJS e sospetto che non stia cogliendo un concetto. Sto anche usando Twitter Bootstrap e ho caricato jQuery.

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

base Tag HTML:

<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> 

Fare questo 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 io non riesco a capire come integrare angolare e jQuery per ottenere questo fatto, perché sto utilizzando Angolare per recuperare l'elenco principale (in formato JSON) dal server e aggiornare un elenco sulla pagina.

Come si integra questo? Io non riesco a trovare l'elemento che ho cliccato su una volta che sono all'interno della funzione di regolazione angolare

Controller:

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

Answer 1

Mentre AngularJS si permette di ottenere una mano su un evento click (e quindi un obiettivo di esso) con la seguente sintassi (notare l'argomento $event alla funzione setMaster; documentazione qui: http://docs.angularjs.org/api/ng.directive:ngClick):

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

questo non è molto angolare modo per risolvere questo problema. Con AngularJS l'attenzione si concentra sulla manipolazione del modello. Si potrebbe mutare un modello e lasciare che AngularJS calcoli il rendering.

L'AngularJS-modo di risolvere questo problema (senza l'utilizzo di jQuery e senza la necessità di passare il $event argomento) 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> 

in cui i metodi nel controller sarebbe simile a questa:

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

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

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