Bagaimana untuk Menambah Arahan Secara Dinamik dalam AngularJS tanpa Gelung Infinite?

Menambah Arahan Secara Dinamik dengan AngularJS

Apabila membina elemen UI kompleks dalam AngularJS, anda mungkin perlu menambahkan arahan secara dinamik pada elemen DOM. Satu pendekatan untuk mencapai matlamat ini ialah dengan mencipta arahan peringkat tinggi yang menguruskan penambahan berbilang arahan.

Pelaksanaan dengan Penyusunan Bersyarat

Satu kaedah adalah untuk menyemak sama ada arahan yang dikehendaki telah ditambahkan sebelum cuba menambahkannya. Pendekatan ini melibatkan menetapkan semakan bersyarat dalam fungsi pautan arahan:

<code class="javascript">angular.module('app')
  .directive('superDirective', function ($compile, $injector) {
    return {
      restrict: 'A',
      replace: true,
      link: function (scope, element, attrs) {
        if (element.attr('datepicker')) { // Check for existing directive
          return;
        }
        element.attr('datepicker', 'someValue'); // Add directive attribute
        // Add other directive attributes
        $compile(element)(scope);
      }
    };
  });</code>

Walau bagaimanapun, pendekatan ini boleh mengakibatkan gelung tak terhingga jika atribut yang ditambah tidak dialih keluar dengan betul daripada elemen.

Penyelesaian dengan Keutamaan dan Arahan Terminal

Untuk mengelakkan gelung tak terhingga dan memastikan pelaksanaan arahan yang betul, gabungan sifat keutamaan dan terminal boleh digunakan:

<code class="javascript">angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false, 
      terminal: true, // Skips compilation of subsequent directives on this element
      priority: 1000, // Executes before other directives
      link: function (scope, element, attrs) {
        // Add tooltip and tooltip placement directives
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        // Remove the directive attribute to prevent recursive compilation
        element.removeAttr("common-things"); 
        element.removeAttr("data-common-things");
        // Compile the element again, including the added directives
        $compile(element)(scope);
      }
    };
  });</code>

Tetapan terminal kepada true menghalang penyusunan arahan seterusnya pada elemen yang sama. Keutamaan tinggi memastikan arahan tersuai disusun sebelum yang lain. Mengalih keluar atribut arahan selepas itu menghalang gelung tak terhingga. Pendekatan ini memastikan bahawa arahan tambahan dilaksanakan dengan betul tanpa menyebabkan sebarang gangguan.

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