Soy relativamente nuevo en AngularJS y sospecho que no estoy captando un concepto. También estoy usando Twitter Bootstrap y tengo jQuery cargado.
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 las ganancias de la clase activa.
Marcado HTML básico:
<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 lograr esto, porque estoy usando Angular para obtener la lista maestra (en forma JSON) del servidor y actualizar una lista en la página.
¿Cómo integro esto? Parece que no puedo encontrar el elemento en el que he hecho clic una vez que estoy dentro de la función del controlador angular
Controlador:
function adminController($scope)
{
$scope.setMaster = function(obj)
{
// How do I get clicked element's parent li?
console.log(obj);
}
}
ng-click="setMaster(section, $event)"
solo un aviso.<a ng-click="doSomething(); $event.stopPropagation()">Click Just Me</a>
$event.target
esta manera puede no ser la "forma angular" ¿Siento que tener unang-repeat
lista grande con cada elemento que necesita un oyente para evaluar un cambio no es eficiente? Al hacer clic en un elemento, todos los elementos de la lista completa deben ser reevaluados, ¿verdad? - por qué no solo apuntar a ese elemento$event.target
para alternar una clase CSS, por ejemplo. ¿Qué piensas? Estoy trabajando en una aplicación Phonegap y necesito exprimir cada ajuste de rendimiento que pueda.$event.currentTarget
lugar de$event.target
. Si el elemento con ng-click tiene elementos secundarios, si se hace clic$event.target
en el elemento secundario se convierte en el elemento secundario.$event.currentTarget
siempre apuntará al elemento con el ng-click designado.