Доступ к кликнутому элементу в angularjs

Я относительно новичок в AngularJS и подозреваю, что не понимаю концепцию. Я также использую Twitter Bootstrap, и у меня загружен jQuery.

Рабочий процесс: пользователь нажимает ссылку из списка, обновляется раздел "мастер", и пользователь ссылки на него получает доступ к активному классу.

Основная 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>

Выполнение этого в jQuery:

jQuery(".list-holder").on('click', 'a', function(event){
    event.preventDefault();
jQuery(".list-holder li").removeClass('active');
jQuery(this).parent('li').addClass('active');
});

Но я не могу понять, как интегрировать Angular и jQuery, чтобы это сделать, потому что я использую Angular для извлечения главного списка (в форме JSON) с сервера и обновления списка на стр.

Как мне интегрировать это? Кажется, я не могу найти элемент, на который я нажал, как только я войду в функцию контроллера Angular

Контроллер:

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

Ответы

Ответ 1

В то время как AngularJS позволяет вам получить руку на событие клика (и, следовательно, его цель) со следующим синтаксисом (обратите внимание на аргумент $event на функцию setMaster; здесь: http://docs.angularjs.org/api/ng.directive:ngClick):

function AdminController($scope) {    
  $scope.setMaster = function(obj, $event){
    console.log($event.target);
  }
}

это не очень важно для решения этой проблемы. С AngularJS основное внимание уделяется манипуляции с моделью. Один из них будет мутировать модель и позволить AngularJS определить рендеринг.

Угловой способ решения этой проблемы (без использования jQuery и без необходимости передавать аргумент $event):

<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>

где методы в контроллере будут выглядеть так:

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

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

Вот полный jsFiddle: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/