jquery - queryselector - document getelementbyid angularjs controller

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 "principal" se actualiza y el usuario del enlace hace clic en la clase de ganancias activas.

Marcado básico de 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>

Haciendo 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 entender cómo 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 integro esto? Parece que no puedo encontrar el elemento en el que hice clic una vez que estoy dentro de la función de controlador angular

Controlador:

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

Answer 1

Mientras que AngularJS le permite obtener una mano en un evento de clic (y por lo tanto un objetivo) con la siguiente sintaxis (tenga en cuenta el argumento $event para 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);
  }
}

esta no es una forma muy angular 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.

La manera AngularJS de resolver este problema (sin usar jQuery y sin la necesidad de pasar el argumento $event ) 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ían así:

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

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

Aquí está el jsFiddle completo: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/