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

AngularJS와가 수 있지만 당신은 클릭 이벤트에 손을 얻기 위해 (그리고 그것의 대상) 다음 구문은 (메모 $event받는 인수 setMaster기능 여기에 문서를 : http://docs.angularjs.org/api/ng.directive : ng 클릭 ) :

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

이것은이 문제를 해결하는 각도가 아닙니다. AngularJS에서는 모델 조작에 중점을 둡니다. 하나는 모델을 변경하고 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/