Accediendo al elemento cliqueado en angularjs

Question

Soy relativamente nuevo en AngularJS y sospecho que no entiendo un concepto. También estoy usando Twitter Bootstrap y he cargado jQuery.

Flujo de trabajo: el usuario hace clic en un enlace de una lista, la sección "maestra" se actualiza y el usuario del enlace hace clic en la clase de ganancias activas.

básico Formato 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> 

Hacer esto en jQuery:

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

Pero no puedo encontrar la manera de integrar angular y jQuery para hacer esto, porque estoy usando Angular para buscar la lista maestra (en formato JSON) desde el servidor y actualizar una lista en la página.

¿Cómo puedo integrar esto? Me parece que no puede encontrar el elemento que he hecho clic en una vez que esté dentro de la función de regulación angular

controlador:

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

Answer 1

Mientras AngularJS que permite conseguir una mano en un evento de clic (y por lo tanto un objetivo de la misma) con la siguiente sintaxis (tenga en cuenta el argumento $event a la función setMaster; documentación aquí: http://docs.angularjs.org/api/ng.directive:ngClick):

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

esto no es muy angular manera de resolver este problema. Con AngularJS el foco está en la manipulación del modelo. Uno mutaría un modelo y dejaría que AngularJS descubriera el renderizado.

El AngularJS-forma de resolver este problema (sin usar jQuery y sin la necesidad de pasar el $event argumento) sería:

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

donde los métodos en el controlador se vería así:

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

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

Aquí es el jsFiddle completa: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/