Jestem stosunkowo nowy w AngularJS i podejrzewam, że nie rozumiem koncepcji. Używam również Twittera Bootstrap i mam załadowany jQuery.
Przepływ pracy: użytkownik klika łącze z listy, sekcja „główna” jest aktualizowana, a użytkownik klikający łącze uzyskuje aktywną klasę.
Podstawowe znaczniki 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>
Robiąc to w jQuery:
jQuery(".list-holder").on('click', 'a', function(event){
event.preventDefault();
jQuery(".list-holder li").removeClass('active');
jQuery(this).parent('li').addClass('active');
});
Ale nie mogę dowiedzieć się, jak zintegrować Angular i jQuery, aby to zrobić, ponieważ używam Angulara do pobierania listy głównej (w postaci JSON) z serwera i aktualizowania listy na stronie.
Jak to zintegrować? Nie mogę znaleźć elementu, na który kliknąłem, gdy jestem w funkcji kontrolera kątowego
Kontroler:
function adminController($scope)
{
$scope.setMaster = function(obj)
{
// How do I get clicked element's parent li?
console.log(obj);
}
}
ng-click="setMaster(section, $event)"
tylko ostrzeżenie.<a ng-click="doSomething(); $event.stopPropagation()">Click Just Me</a>
$event.target
ten sposób może nie być „kanciastym sposobem”, czuję, że posiadanie dużejng-repeat
listy z każdym elementem wymagającym słuchacza do oceny zmiany nie jest wydajne? Kliknięcie jednego elementu oznaczałoby, że każdy element na całej liście musiałby zostać ponownie oceniony, prawda? - dlaczego nie skupiać się tylko na tym jednym elemencie,$event.target
na przykład przełączając klasę CSS. Co myślisz? Pracuję nad aplikacją Phonegap i muszę wycisnąć wszystkie możliwe poprawki wydajności.$event.currentTarget
zamiast$event.target
. Jeśli element z ng-click ma elementy potomne, po kliknięciu$event.target
elementu potomnego staje się elementem podrzędnym.$event.currentTarget
zawsze będzie kierować na element wyznaczonym ng-click.