Penjelasan terperinci tentang sifat objek yang dikembalikan oleh AngularJS directive_AngularJS

Ditulis di hadapan: Memandangkan bahagian arahan adalah keutamaan utama dalam angularjs, ia akan diterangkan dalam berbilang bab. Bab ini menerangkan terutamanya atribut yang lebih ringkas dalam objek yang dikembalikan melalui arahan

Arahan() digunakan dalam angularjs untuk mentakrifkan arahan Kaedah ini menerima dua parameter: nama (nama arahan), factory_function (fungsi ini mentakrifkan semua tingkah laku arahan dan mengembalikan objek)

Berangan:

//index.js
angular.module('myApp',[]);
myApp.directive('myDirective',function() {return {};});

Objek yang dikembalikan mengandungi sifat dan kaedah berikut:

1: hadkan: Rentetan

Atribut ini digunakan untuk menerangkan bentuk di mana arahan myDirective diisytiharkan dalam DOM (iaitu, di mana ia harus digunakan dalam HTML)
Nilai pilihan atribut ini ialah: E (elemen), A (atribut, nilai lalai), C (nama kelas), M (komen), yang boleh digunakan secara bersendirian atau digabungkan
Saya telah melihat pepatah: Jika anda ingin menyesuaikan fungsi arahan bebas, iaitu, perintah itu boleh menyelesaikan satu siri operasi secara bebas tanpa bergantung pada elemen lain, atribut, dan lain-lain, kemudian tentukan arahan sebagai elemen jika anda mahu untuk menggunakan arahan ini Untuk melanjutkan kefungsian arahan sedia ada, takrifkannya sebagai atribut. Saya tidak tahu sama ada pemahaman ini munasabah, tetapi ia sememangnya standard kaedah pemilihan yang baik yang boleh digunakan untuk rujukan

2: keutamaan: Nombor

Atribut ini digunakan untuk mentakrifkan keutamaan arahan (lalai ialah 0, ngRepeat mempunyai keutamaan tertinggi antara semua arahan terbina dalam, iaitu 1000 yang mempunyai keutamaan yang lebih tinggi dilaksanakan dahulu.

3: terminal: Boolean

Atribut ini berkaitan dengan atribut keutamaan Ia digunakan untuk menentukan sama ada untuk menghentikan arahan dengan keutamaan yang lebih rendah daripada arahan ini pada elemen semasa, tetapi keutamaan yang sama masih akan dilaksanakan
Berangan:

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'AE',
    priority: 1,
    template: '<div>hello world</div>'
  };
})
.directive('myDirective1',function() {
  return {
    restrict: 'AE',
    priority: 3,
    terminal: true
  };
})

<!-- index.html -->
<div my-directive my-directive1></div>

Jika arahan myDirective1 tidak ditakrifkan, penyemak imbas akan memaparkan hello world, tetapi selepas menambah arahan myDirective1, menetapkan keutamaannya menjadi lebih besar daripada myDirective, dan menetapkan atribut terminal kepada benar pada myDirective1, ia akan berhenti Arahan myDirektif.

4: templat: Rentetan/Fungsi

Atribut ini mentakrifkan templat (iaitu, bahagian yang menggunakan arahan ini dalam fail html akan menggantikan kandungan templat, jadi templat terutamanya dalam format html)
Atribut datang dalam dua bentuk: sekeping teks html dan fungsi yang mengembalikan rentetan templat dan fungsi menerima dua parameter: tElement, tAttrs

5: templateUrl: Rentetan/Fungsi

Apabila terdapat banyak kandungan templat, sarangnya terus dalam templat akan kelihatan berlebihan Anda boleh menyimpan kod templat dalam fail yang berasingan. Dalam kes ini, anda perlu mengimport fail TemplateUrl 🎜> Atribut juga terdapat dalam dua bentuk: rentetan yang mewakili laluan fail html luaran dan fungsi yang mengembalikan rentetan laluan ke fail html luaran Fungsi ini menerima dua parameter: tElement, tAttrs

6: ganti: Boolean

Nilai lalai atribut ini adalah palsu, menunjukkan sama ada templat akan dimasukkan sebagai elemen anak ke dalam elemen yang memanggil arahan ini atau menulis ganti dan menggantikan elemen yang memanggil arahan ini.

Berangan:

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'A',
    template: '<div>hello world</div>',
    replace: true/false
  };  
}) 

 <!-- index.html -->
<my-directive></my-directive>

Apabila repalce adalah palsu, kod sumber penyemak imbas dipaparkan sebagai

hello world

Apabila benar, ia akan kelihatan sebagai

hello world

7: transclude: Boolean

Berangan:

<!-- index.html -->
<div my-directive>world</div>

Seperti contoh ini, jika terdapat kandungan di dalam arahan, biasanya templat akan terus menulis ganti dan menggantikan kandungan, tetapi sekarang saya mahu menyimpannya, dan di sinilah transclude berguna

//index.js
angular.module('myApp',[])
.dirctive('myDirective',function() {
  return {
    restrict: 'EA', 
    transclude: true,
    template: '<div>hello <span ng-transclude></span></div>'
  };
})

Kod js di atas akan membenamkan dunia yang terkandung dalam arahan fail html ke dalam elemen span dalam templat Harap maklum bahawa elemen span menambah atribut arahan terbina dalam ng-transclude (ini sangat penting)

Ringkasnya, tujuan atribut ini adalah untuk memberitahu pengkompil angularjs untuk meletakkan kandungan yang diperoleh daripada elemen DOM di mana ia menemui arahan ng-transclude.
Perkara di atas adalah keseluruhan kandungan artikel ini, saya harap ia dapat membantu kajian semua orang.