Sou relativamente novo no AngularJS e suspeito que não estou entendendo um conceito. Também estou usando o Twitter Bootstrap e tenho o jQuery carregado.
Fluxo de trabalho: o usuário clica em um link de uma lista, a seção "mestre" é atualizada e o usuário clicado em ganha a classe ativa.
Marcação HTML básica:
<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>
Fazendo isso no jQuery:
jQuery(".list-holder").on('click', 'a', function(event){
event.preventDefault();
jQuery(".list-holder li").removeClass('active');
jQuery(this).parent('li').addClass('active');
});
Mas não consigo descobrir como integrar o Angular e o jQuery para fazer isso, porque estou usando o Angular para buscar a lista principal (no formato JSON) do servidor e atualizar uma lista na página.
Como faço para integrar isso? Parece que não consigo encontrar o elemento em que clicamos quando estou na função do 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)"
Apenas um aviso.<a ng-click="doSomething(); $event.stopPropagation()">Click Just Me</a>
$event.target
dessa maneira possa não ser a "maneira angular", sinto que ter umang-repeat
lista grande com todos os itens que precisam de um ouvinte para avaliar uma alteração não é eficiente? Clicar em um elemento significa que todos os itens da lista inteira devem ser reavaliados, certo? - por que não apenas direcionar esse item$event.target
para alternar uma classe CSS, por exemplo. O que você acha? Estou trabalhando em um aplicativo Phonegap e preciso apertar todos os ajustes de desempenho que puder.$event.currentTarget
vez de$event.target
. Se o elemento com ng-click tiver elementos filho, se o elemento filho for clicado, ele$event.target
se tornará o elemento filho.$event.currentTarget
sempre segmentará o elemento com o ng-click designado.