Je suis relativement nouveau sur AngularJS et je soupçonne que je ne saisis pas un concept. J'utilise également Twitter Bootstrap et jQuery est chargé.
Flux de travail: l'utilisateur clique sur un lien dans une liste, la section «maître» est mise à jour et le lien utilisateur cliqué sur gagne la classe active.
Balisage HTML de base:
<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>
Faire cela dans jQuery:
jQuery(".list-holder").on('click', 'a', function(event){
event.preventDefault();
jQuery(".list-holder li").removeClass('active');
jQuery(this).parent('li').addClass('active');
});
Mais je ne peux pas comprendre comment intégrer Angular et jQuery pour y parvenir, car j'utilise Angular pour récupérer la liste principale (sous forme JSON) sur le serveur et mettre à jour une liste sur la page.
Comment intégrer cela? Je n'arrive pas à trouver l'élément sur lequel j'ai cliqué une fois que je suis dans la fonction de contrôleur angulaire
Manette:
function adminController($scope)
{
$scope.setMaster = function(obj)
{
// How do I get clicked element's parent li?
console.log(obj);
}
}
ng-click="setMaster(section, $event)"
juste un avertissement.<a ng-click="doSomething(); $event.stopPropagation()">Click Just Me</a>
$event.target
ce type ne soit peut-être pas la «méthode angulaire», j'ai l'impression d'avoir une longueng-repeat
liste avec chaque élément nécessitant un auditeur pour évaluer un changement n'est pas efficace? Cliquer sur un élément signifierait que chaque élément de la liste entière doit être réévalué, n'est-ce pas? - pourquoi ne pas simplement cibler cet élément avec$event.target
pour basculer une classe CSS par exemple. Qu'est-ce que tu penses? Je travaille sur une application Phonegap et j'ai besoin de chaque ajustement de performance possible.$event.currentTarget
place de$event.target
. Si l'élément avec ng-click a des éléments enfants, si l'élément enfant est cliqué$event.target
devient l'élément enfant.$event.currentTarget
ciblera toujours l'élément avec le ng-clic désigné.