Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mengelakkan Gelung Infinite Apabila Menambah Arahan daripada Arahan Pembungkus dalam AngularJS?

Bagaimana untuk Mengelakkan Gelung Infinite Apabila Menambah Arahan daripada Arahan Pembungkus dalam AngularJS?

DDD
DDDasal
2024-11-03 11:03:29410semak imbas

How to Avoid Infinite Loops When Adding Directives from a Wrapper Directive in AngularJS?

Menggabungkan Arahan Berbilang daripada Arahan Pembalut

Ikhtisar

Soalan ini meneroka cara membuat arahan AngularJS pembalut yang menambahkan arahan tambahan pada elemennya digunakan untuk. Matlamatnya adalah untuk mengelakkan gelung tak terhingga apabila cuba menambah dan kemudian menyusun arahan baharu menggunakan $compile.

Pendekatan

Penyelesaian yang disediakan menggunakan langkah berikut:

  1. Keutamaan dan Tetapan Terminal:

    • Tetapkan keutamaan arahan pembalut kepada nilai yang tinggi (mis., 1000) menggunakan sifat keutamaan. Ini memastikan ia dijalankan sebelum arahan lain pada elemen yang sama.
    • Tetapkan sifat terminal kepada benar. Ini menghalang AngularJS daripada menyusun sebarang arahan lain selepas arahan pembalut telah dijalankan.
  2. Kompilasi Arahan:

    • Dalam kompilasi fungsi arahan pembalut, tambahkan arahan yang diingini pada elemen menggunakan element.attr(), dan alih keluar atribut arahan pembalut untuk menghalang gelung tak terhingga.
    • $kompilasi elemen untuk menggabungkan arahan tambahan.
    Mengalih keluar atribut arahan pembalut menghalangnya daripada disusun semula dalam panggilan $compile berikutnya.
Dengan pada mulanya menyusun elemen tanpa atribut arahan pembalut, panggilan $compile berikutnya mengambil masa berhati-hati menyusun sebarang arahan yang dilangkau.

<code class="javascript">angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      priority: 1000,
      link: function (scope, element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); // Remove the wrapper directive's attribute
        element.removeAttr("data-common-things"); // Also remove the same attribute with data- prefix

        $compile(element)(scope);
      }
    };
  });</code>
Kesimpulan

Pendekatan ini menyediakan penyelesaian yang mantap untuk menggabungkan berbilang arahan daripada arahan pembalut sambil mengelakkan potensi gelung tak terhingga. Keutamaan dan sifat terminal adalah penting dalam mencapai gelagat yang diingini, dan adalah penting untuk mengalih keluar atribut arahan pembalut selepas mengubah suai elemen untuk mengelakkan penyusunan selanjutnya.

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

    Kenyataan:
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn