angular.js - AngularJS如何给在JS中添加的DOM元素绑定事件

Question

  var tpl = '<button ng-click="submitForm()" submit-form>' +
              'Submit'+
            '</button>'

  // 这两个方法都不work
  $scope.submitForm = function () {}
  angular.module('xxx', []).directive('submitForm')

感谢回答！

Answer 1

Saya tidak mempunyai masa untuk menulis contoh untuk menyokongnya, jadi saya akan menerangkan secara ringkas pemahaman saya, saya harap ia akan berguna kepada anda.

Dalam keadaan biasa (iaitu, tidak memasukkan objek DOM secara dinamik), sebab mengapa arahan seperti ng-click berkesan (iaitu, kaedah yang didaftarkan dalam skop yang boleh dilihat boleh dipanggil selepas mengklik) adalah kerana sudut berada dalam penyusunan fasa. Objek DOM hos (iaitu, objek DOM ditambah dengan arahan ng-click) terikat pada skop semasa.

Dalam erti kata lain, skop semasa mengetahui bahawa terdapat objek DOM terikat pada ng-click, jadi ng-click akan berfungsi.

Dalam contoh anda, serpihan HTML dimasukkan secara dinamik ke dalam pepohon DOM selepas fasa penyusunan Walaupun anda menulis ng-click, skop semasa tidak mengetahui kewujudan arahan ini, jadi ia akan menjadi tidak sah.

Oleh itu, apabila anda memasukkan serpihan HTML secara dinamik, anda perlu memanggil perkhidmatan $compile secara manual dan mengikat objek DOM ini kepada skop semasa (atau skop lain yang boleh dilihat, bergantung pada logik aplikasi anda). berikut:

// 在某一个 controller 中，假设用 jQuery 动态插入一个 HTML 片段……
$('selector').html(
  $compile(
    '<button ng-click="submitForm()">' + 'Submit' + '</button>'
  )(scope)
);

Perhatikan bahawa perkhidmatan $compile mesti disuntik terlebih dahulu.

Selain itu, kaedah ini jelas terlalu "menjijikkan". Terdapat cara yang lebih baik (tetapi sejumlah besar sisipan dinamik akan menyebabkan kehilangan prestasi) adalah dengan menggunakan arahan ng-repeat, contohnya:

<!-- 在要动态插入的地方…… -->
<p class="form-control" ng-repeat="fragment in fragments">
  <button ng-click="submitForm()">{{fragment.text}}</button>
</p>

fragments di sini ialah tatasusunan kosong (keadaan awal), jadi ng-repeat di sini tidak akan mempunyai apa-apa kesan pada mulanya Kemudian anda menulis kaedah untuk mencetuskan tindakan sisipan dinamik, dan meletakkan yang serupa dengan { text: 'Submit' } seperti Objek ini push ke dalam tatasusunan kosong ini, ng-repeat akan "membantu" anda memasukkan objek DOM, dan ng-repeat sendiri akan menyusun semula objek DOM yang mendasarinya, jadi ng-click akan berkuat kuasa mengikut kehendak anda.

Saya mengalih keluar arahan submit-form anda dalam kedua-dua contoh di atas kerana ia tidak perlu. Jika anda ingin menulisnya sebagai arahan, maka anda harus mempelajari kaedah ng-repeat, yang bermaksud memantau ungkapan (seperti item in items), dan apabila items berubah, susun semula templat HTML asas. Anda boleh mencari kod tertentu, sudut adalah sumber terbuka.