Bagaimana untuk Mengelakkan Gelung Infinite Apabila Menambah Arahan Secara Dinamik dengan AngularJS?

Menambah Arahan Secara Dinamik dengan AngularJS

Artikel ini menangani kebimbangan bersama dalam pembangunan AngularJS: menambahkan berbilang arahan pada satu elemen DOM. Matlamatnya ialah untuk mencipta arahan yang menambahkan atribut tertentu, seperti datepicker, datepicker-language dan ng-required, pada elemen sasaran.

Pendekatan Asal: Menyemak Atribut Ditambah

Pada mulanya, pembangun cuba menyemak sama ada atribut yang diperlukan telah ditambahkan sebelum menambahkannya:

<code class="javascript">if (element.attr('datepicker')) { // check
  return;
}</code>

Walau bagaimanapun, pendekatan ini memperkenalkan gelung tak terhingga apabila menggunakan $compile, kerana $compile akan cuba memproses atribut tambahan.

Pendekatan Kemas Kini: Menggunakan Keutamaan dan Terminal

Setelah menerima input luaran, pembangun menyedari bahawa penyelesaian memerlukan penetapan kedua-dua keutamaan dan terminal sifat arahan tersuai. Pendekatan ini melibatkan:

1. Menetapkan keutamaan tinggi (cth., 1000) untuk memastikan arahan tersuai disusun dahulu.
2. Menetapkan terminal kepada benar untuk mengelakkan penyusunan arahan lain pada elemen yang sama.

Pelaksanaan

Berikut ialah contoh pelaksanaan arahan menggunakan keutamaan dan terminal:

<code class="javascript">angular.module('app').directive('superDirective', function ($compile) {
  return {
    restrict: 'A',
    replace: false,
    terminal: true,
    priority: 1000,
    link: function (scope, element, attrs) {
      // Remove the "superDirective" attribute to avoid looping.
      element.removeAttr("superDirective");

      // Add the necessary attributes.
      element.attr('datepicker', 'someValue');
      element.attr('datepicker-language', 'en');

      // Compile the element.
      $compile(element)(scope);
    }
  };
});</code>

Pendekatan ini membolehkan arahan tersuai untuk mengubah suai elemen dan menambah atribut, kemudian gunakan $compile untuk menyusun semua arahan, termasuk yang dilangkau kerana terminal:true.

Penjelasan

Oleh menetapkan terminal kepada benar, arahan tersuai akan menjadi satu-satunya arahan yang disusun pada elemen sasaran. Ini menghalang kompilasi berlebihan dan kemungkinan konflik. Keutamaan tinggi memastikan arahan tersuai disusun dahulu, membenarkannya mengubah suai elemen sebelum arahan lain cuba mengaksesnya.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Gelung Infinite Apabila Menambah Arahan Secara Dinamik dengan AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!