การเข้าถึงองค์ประกอบที่ถูกคลิกในเชิงมุม

ฉันค่อนข้างใหม่กับ AngularJS และสงสัยว่าฉันไม่เข้าใจแนวคิด ฉันใช้ Twitter Bootstrap และฉันโหลด jQuery แล้ว

เวิร์กโฟลว์: ผู้ใช้คลิกลิงก์จากรายการส่วน "master" จะได้รับการอัปเดตและผู้ใช้ลิงก์จะได้รับคลาสที่ใช้งานอยู่

มาร์กอัป 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) จากเซิร์ฟเวอร์และอัปเดตรายการในหน้า

ฉันจะรวมสิ่งนี้ได้อย่างไร ฉันไม่สามารถหาองค์ประกอบที่ฉันคลิกได้เมื่อฉันอยู่ในฟังก์ชันตัวควบคุมเชิงมุม

ควบคุม:

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 : ngClick ):

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/