[jquery] 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를 사용하여 서버에서 마스터 목록 (JSON 형식)을 가져 와서 페이지의 목록을 업데이트하기 때문에 Angular와 jQuery를 통합하는 방법을 알 수 없습니다.

이것을 어떻게 통합합니까? 각도 컨트롤러 기능에 들어가면 클릭 한 요소를 찾을 수없는 것 같습니다.

제어 장치:

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

답변

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

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