Mengakses elemen yang diklik di angularjs

173

Saya relatif baru untuk AngularJS dan curiga saya tidak memahami konsep. Saya juga menggunakan Bootstrap Twitter dan saya punya jQuery dimuat.

Alur Kerja: Pengguna mengklik tautan dari daftar, bagian "master" diperbarui dan tautan pengguna mengklik pada kelas aktif.

Markup HTML Dasar:

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

Melakukan ini di jQuery:

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

Tapi saya tidak tahu cara mengintegrasikan Angular dan jQuery untuk menyelesaikan ini, karena saya menggunakan Angular untuk mengambil daftar master (dalam bentuk JSON) dari server dan memperbarui daftar di halaman.

Bagaimana saya mengintegrasikan ini? Saya tidak dapat menemukan elemen yang saya klik setelah saya berada di dalam fungsi pengontrol sudut

Pengendali:

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

Jawaban:

283

Sementara AngularJS memungkinkan Anda untuk mendapatkan acara klik (dan karenanya menjadi target) dengan sintaks berikut (catat $eventargumen untuk setMasterfungsi tersebut; dokumentasi di sini: http://docs.angularjs.org/api/ng.directive : ngClick ):

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

ini bukan cara yang sangat sudut untuk memecahkan masalah ini. Dengan AngularJS fokusnya adalah pada manipulasi model. Satu akan bermutasi model dan membiarkan AngularJS mencari rendering.

Cara AngularJS untuk memecahkan masalah ini (tanpa menggunakan jQuery dan tanpa perlu melewati $eventargumen ) adalah:

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

di mana metode dalam controller akan terlihat seperti ini:

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

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

Inilah jsFiddle lengkap: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

pkozlowski.opensource
sumber
198
FYI: $ event tidak berfungsi kecuali dilewatkan di markup: ng-click="setMaster(section, $event)"Hanya kepala.
Ben Lesh
4
Tidak juga, itu harus diteruskan ke fungsi. Pada kenyataannya, mungkin itu bukan ide terbaik untuk mereferensikan hal-hal khusus dom seperti ini di controller Anda. Umumnya ketika $ event digunakan, itu dalam konteks menghentikan propagasi atau sejenisnya: <a ng-click="doSomething(); $event.stopPropagation()">Click Just Me</a>
Ben Lesh
9
Saya punya masalah menggunakan $ event.target karena saya punya ikon di dalam tombol saya. Jadi, kadang-kadang hasil target adalah tombol dan kadang-kadang adalah ikon (tergantung tempat saya mengklik). Saya menggunakan $ event.currentTarget daripada target dan itu bekerja seperti pesona.
lao
4
Meskipun menggunakan $event.targetseperti ini mungkin bukan "cara sudut" Saya merasa seperti memiliki ng-repeatdaftar besar dengan setiap item yang membutuhkan pendengar untuk mengevaluasi perubahan tidak efisien? Mengklik satu elemen berarti setiap item dalam seluruh daftar harus dievaluasi ulang bukan? - mengapa tidak hanya menargetkan satu item dengan $event.targetuntuk beralih kelas CSS misalnya. Bagaimana menurut anda? Saya sedang mengerjakan Aplikasi Phonegap dan perlu memeras setiap perubahan kinerja yang saya bisa.
Bradley Flood
13
Saya juga ingin merekomendasikan menggunakan $event.currentTargetbukan $event.target. Jika elemen dengan ng-klik memiliki elemen anak, jika elemen anak diklik $event.targetmenjadi elemen anak. $event.currentTargetakan selalu menargetkan elemen dengan ng-klik yang ditunjuk.
Gene Parcellano