angular.js - 为什么给 Angular 指令绑定事件无法生效

Question

因为刚刚接触 Angular，所以有些概念还很模糊，对于这个问题尝试通过 Google 查找答案，但并未找到合适的解答，所以想在这里请教一下各位，这里是一个大概的代码：

<p ng-repeat="item in list" class="need-another-js"></p>
<script>
    $('.need-another-js').click(function(){
        // do something
    })
</script>

如果把 ng-repeat 去掉，JS 代码的效果可以实现，但是加上 ng-repeat 后，效果就不存在，这里是因为 Angular 作用域的问题吗？

Answer 1

Ini tiada kaitan dengan skop, ia hanyalah bentuk ralat biasa jquery => angular.

AngularJS arahan, sebagai API "deklaratif", sangat berbeza daripada API "imperatif" jquery Mudah untuk membuat kesilapan apabila anda mencampurkannya.

1. Ralat akal sehat asas, id digunakan untuk menunjukkan keunikan unsur, tetapi anda menggunakannya pada ng-repeat, yang bermaksud mungkin terdapat beberapa id elemen, kesemuanya adalah need-another-js. Ini tiada kena mengena dengan jquery atau angular, ia semata-mata html kurang pengetahuan

2. ng-repeat, seperti arahan yang diberikan oleh angular, perlu melalui proses angular dan compile linking Akibatnya, apabila $('#need-another-js').click anda mendaftarkan acara untuk elemen #need-another-js , elemen ini sebenarnya belum dijana menjadi angular oleh DOM, dan ini adalah kunci untuk tidak berkuat kuasa.

Hanya sebagai contoh anda, anda boleh membuat pengubahsuaian berikut untuk menjadikannya berkesan:

<p ng-repeat="item in list" class="need-another-js"></p>

Tidak perluidGunakanclass

<script>
    $(document).on('click', '.need-another-js', function(){
        // do something
    });
</script>

Walaupun saya tidak mengesyorkan cara penulisan ini, kerana anda memilih untuk mencampurkan "imperatif" dan 声明式API, anda mesti mempunyai alasan anda.

Tambahan:

Mengenai cara angular berfungsi, saya rasa ia berguna untuk pelajar yang baru mula membaca pengenalan ini di laman web rasmi:

Alamat dokumen: konsep

Answer 2

<p ng-repeat="item in list" id="need-another-js"></p>
<!--ng-repeat生成了一系列id为need-another-js的DOM元素，而DOM元素的ID是不能重复的-->
<script>
    $('#need-another-js').click(function(){//可能在ng-repeat还未执行完成的时候便执行了
    //需在ng-repeat执行完成时，设置onclick事件才有效
        // do something
    })
</script>

Answer 3

angular mempunyai acara mengikat yang menyokong ng-klik

Anda boleh cuba menulisnya seperti ini

<p ng-repeat="item in list" ng-click="click()"></p>
<script>
    //省略其他控制器的写法
    $scope.click = function() {
       //do something
   }
</script>

Answer 4

Semasa saya belajar Angular, saya bertukar terus dari jq ke sudut boleh melakukan semua yang jq boleh lakukan

Answer 5

ng-repeat adalah untuk menambahkan elemen dom secara dinamik Jika anda menggunakan kaedah klik untuk mengikat acara kepada elemen yang ditambah secara dinamik, ia tidak akan dicetuskan. Jika anda suka menggunakan jquery, gunakan kaedah yang dicadangkan oleh leftstick, tetapi disyorkan untuk menggunakan kaedah sudut yang dicadangkan oleh mumofa