AngularJS Directive Batasi A vs E

113

Saya bekerja dalam tim kecil, membangun di AngularJS dan mencoba mempertahankan beberapa standar dasar & praktik terbaik; terutama mengingat kami relatif baru dengan Angular.

Pertanyaan saya adalah tentang Directive. Lebih tepatnya, restrictopsinya.

Beberapa dari kita menggunakan restrict: 'E'sehingga memiliki <my-directive></my-directive>html.

Orang lain menggunakan restrict: 'A'dan memiliki <div my-directive></div>html.

Kemudian, tentu saja, Anda dapat menggunakan restrict: 'EA'dan menggunakan salah satu cara di atas.

Saat ini itu bukan masalah besar, meskipun ketika proyek ini sebesar yang akan didapat, saya ingin siapa pun yang melihatnya dapat dengan mudah memahami apa yang sedang terjadi.

Apakah ada pro / kontra untuk atribut atau elemen cara melakukan sesuatu?

Apakah ada jebakan yang harus kita ketahui, jika memilih say element over atribut?

javascript html angularjs

— Darren Wainwright
sumber

100

Menurut dokumentasi :

Kapan saya harus menggunakan atribut versus elemen? Gunakan elemen saat Anda membuat komponen yang mengontrol template. Kasus umum untuk ini adalah saat Anda membuat Bahasa Khusus Domain untuk bagian template Anda. Gunakan atribut saat Anda mendekorasi elemen yang ada dengan fungsionalitas baru.

Edit komentar berikut tentang jebakan untuk jawaban lengkap:

Dengan asumsi Anda membuat aplikasi yang harus berjalan di Internet Explorer <= 8, yang dukungannya telah dihentikan oleh tim AngularJS dari AngularJS 1.3, Anda harus mengikuti petunjuk berikut untuk membuatnya berfungsi: https: //docs.angularjs .org / guide / ie

— ngasull
sumber

3

Saya telah membaca dokumen tersebut ke atas dan ke bawah tetapi melewatkan yang ini :) terima kasih.

— Darren Wainwright

3

Penjelasan ini tidak mencakup jebakan dan pro / kontra.

— Konstantin Krass

Memperbarui jawaban saya sesuai tentang jebakan. Saya tidak menyebutkan pro / kontra karena saya pikir kita lebih banyak berbicara tentang praktik terbaik di sini, terutama ketika direkomendasikan dan dijelaskan oleh tim Angular.

— ngasull

1

"Saya tidak menyebutkan pro / kontra karena saya pikir kita lebih banyak berbicara tentang praktik terbaik di sini, terutama jika direkomendasikan dan dijelaskan oleh tim Angular." Hah? :)

— Alexander Mills

169

limit adalah untuk mendefinisikan tipe direktif, dan bisa berupa A(Attribute), C(Class), E(Element), dan M(coMment), mari kita asumsikan bahwa nama direktifnya adalah Doc:

Jenis: Penggunaan

A = <div Doc></div>

C = <div class="Doc"></div>

E = <Doc data="book_data"></Doc>

M = 

— Seif Tamallah
sumber

2

kurang jelas dari jawaban oleh @nikunj, tetapi setelah melihat jawaban mereka saya mengerti jawaban Anda ...

— Alexander Mills

47

Opsi pembatasan biasanya diatur ke:

'A' - hanya cocok dengan nama atribut
'E' - hanya cocok dengan nama elemen
'C' - hanya cocok dengan nama kelas
'M' - hanya cocok dengan komentar

Berikut tautan dokumentasinya .

— nikunj gandhi
sumber

sederhana dan bersih

— Gaurav_0093

7

Elemen tidak didukung di IE8 di luar kotak Anda harus melakukan beberapa pekerjaan untuk membuat IE8 menerima tag kustom.

Satu keuntungan menggunakan atribut di atas elemen adalah Anda dapat menerapkan beberapa arahan ke simpul DOM yang sama. Ini sangat berguna untuk hal-hal seperti kontrol formulir di mana Anda dapat menyorot, menonaktifkan, atau menambahkan label dll. Dengan atribut tambahan tanpa harus membungkus elemen dalam sekumpulan tag.

— Jack Allan
sumber

5

Salah satu jebakan yang saya tahu adalah masalah IE dengan elemen khusus. Seperti dikutip dari dokumen :

3) Anda tidak menggunakan tag elemen khusus seperti (gunakan versi atribut sebagai gantinya)

4) jika Anda menggunakan tag elemen khusus, Anda harus mengambil langkah-langkah ini untuk membuat IE 8 dan di bawahnya senang

<!doctype html>
  <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
    <head>
      <!--[if lte IE 8]>
        <script>
          document.createElement('ng-include');
          document.createElement('ng-pluralize');
          document.createElement('ng-view');

          // Optionally these for CSS
          document.createElement('ng:include');
          document.createElement('ng:pluralize');
          document.createElement('ng:view');
        </script>
      <![endif]-->
    </head>
    <body>
      ...
    </body>
  </html>

— Khanh TO
sumber

4

Batu sandungan:

Menggunakan elemen html Anda sendiri seperti <my-directive></my-directive>tidak akan berfungsi di IE8 tanpa solusi alternatif ( https://docs.angularjs.org/guide/ie )
Menggunakan elemen html Anda sendiri akan membuat validasi html gagal.
Arahan dengan satu parameter yang sama dapat dilakukan seperti ini:

<div data-my-directive="ValueOfTheFirstParameter"></div>

Daripada ini:

<my-directive my-param="ValueOfTheFirstParameter"></my-directive>

Kami tidak menggunakan elemen html kustom, karena jika ini 2 fakta.

Setiap arahan oleh kerangka pihak ketiga dapat ditulis dalam dua cara:

<my-directive></my-directive>

atau

<div data-my-directive></div>

melakukan hal yang sama.

— Konstantin Krass
sumber

1

Jika Anda ingin membuat direktif dengan parameter cakupan 1, lebih mudah melakukannya dengan A. Karena Anda tidak perlu membuat atribut tambahan.

— Konstantin Krass

Apa yang Anda maksud dengan tambahan? Kedua alternatif tersebut hanya memiliki satu atribut.

— oliver yang lebih baik

3

2 masalah dengan elemen:

Dukungan buruk dengan browser lama.
SEO - Mesin Google tidak menyukainya.

Gunakan Atribut.

— Amir Popovich
sumber

Arahan sebagai elemen dapat menyebabkan masalah SEO? Aku terkejut. Dan bagaimana dengan replaceatributnya true?

— chalasr

1

Klaim ini membutuhkan referensi. Poin 1 cukup mapan di tempat lain, tetapi saya ingin melihat sumber tentang Poin 2.

— rinogo