AngularJS Direktifi A ve E'yi Kısıtlıyor

113

AngularJS'de küçük bir ekipte çalışıyorum ve bazı temel standartları ve en iyi uygulamaları korumaya çalışıyorum; özellikle Angular'da nispeten yeniyiz.

Sorum Direktiflerle ilgili. Daha doğrusu restrictseçenekler.

Bazılarımız html'de restrict: 'E'böylelikle kullanıyor <my-directive></my-directive>.

Diğerleri html kullanıyor restrict: 'A've kullanıyor <div my-directive></div>.

Sonra, elbette, restrict: 'EA'yukarıdakilerden herhangi birini kullanabilir ve kullanabilirsiniz.

Şu anda önemli değil, ancak bu proje olacağı kadar büyük olduğunda, ona bakan herkesin neler olduğunu kolayca anlamasını isterim.

Bir şeyleri yapmanın niteliği ya da öğe yolu için artılar / eksiler var mı?

Öznitelik yerine say öğesini seçersek bilmemiz gereken herhangi bir tuzak var mı?

javascript html angularjs

— Darren Wainwright
kaynak

100

Belgelere göre :

Bir öğeye karşı bir özniteliği ne zaman kullanmalıyım? Şablonun kontrolünde olan bir bileşen oluştururken bir öğe kullanın. Bunun genel durumu, şablonunuzun bölümleri için Etki Alanına Özgü Dil oluşturduğunuz zamandır. Mevcut bir öğeyi yeni işlevlerle dekore ederken bir öznitelik kullanın.

Tam bir cevap için tuzaklarla ilgili aşağıdaki yorumu düzenleyin:

AngularJS 1.3'ten AngularJS ekibi tarafından desteği bırakılan Internet Explorer <= 8 üzerinde çalışması gereken bir uygulama oluşturduğunuzu varsayarsak, çalışmasını sağlamak için aşağıdaki talimatları izlemeniz gerekir: https: //docs.angularjs .org / rehber / yani

— ngasull
kaynak

3

Bu dokümanları yukarı ve aşağı okudum ama bunu kaçırdım :) teşekkürler.

— Darren Wainwright

3

Bu açıklama herhangi bir tuzağı ve artıları / eksileri kapsamaz.

— Konstantin Krass

Cevabımı tuzaklarla ilgili uygun şekilde güncelledim. Artıları / eksileri bahsetmedim çünkü burada daha çok en iyi uygulamalardan bahsediyoruz, özellikle de Angular ekibi tarafından tavsiye edildiğinde ve açıklandığında.

— ngasull

1

"Artıları / eksileri bahsetmedim çünkü burada daha çok en iyi uygulamalardan bahsettiğimizi düşünüyorum, özellikle de Angular ekibi tarafından tavsiye edildiğinde ve açıklandığında." ha? :)

— Alexander Mills

169

restrict, yönerge türünü tanımlamak içindir ve A(Attribute), C(Class), E(Element) ve M(coMment) olabilir, direktifin adının şu olduğunu varsayalım Doc:

Tür: Kullanım

A = <div Doc></div>

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

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

M = 

— Seif Tamallah
kaynak

2

@nikunj'un cevabından daha az net, ama onların cevabını gördükten sonra sizinkini anlıyorum ...

— Alexander Mills

47

Kısıtlama seçeneği genellikle şu şekilde ayarlanır:

"A" - yalnızca özellik adıyla eşleşir
'E' - yalnızca öğe adıyla eşleşir
'C' - yalnızca sınıf adıyla eşleşir
'M' - yalnızca yorumla eşleşir

İşte dokümantasyon bağlantısı .

— nikunj gandhi
kaynak

basit ve temiz

— Gaurav_0093

7

Öğe, IE8'de kutudan çıkar çıkmaz desteklenmez, IE8'in özel etiketleri kabul etmesini sağlamak için biraz çalışmanız gerekir.

Bir öğe yerine öznitelik kullanmanın bir avantajı, aynı DOM düğümüne birden çok yönerge uygulayabilmenizdir. Bu özellikle, öğeyi bir grup etikete sarmak zorunda kalmadan ek özniteliklerle vurgulayabileceğiniz, devre dışı bırakabileceğiniz veya etiket ekleyebileceğiniz vb. Form denetimleri gibi şeyler için kullanışlıdır.

— Jack Allan
kaynak

5

Bildiğim gibi tuzaklardan biri, özel öğelerle ilgili IE sorunu. Dokümanlardan alıntılandığı gibi :

3) Eğer yok ) bu tür yerine nitelik sürümünü kullanmak (gibi özel eleman etiketleri kullanabilirsiniz

Eğer 4) kullanımı yapmak özel öğe etiketleri, o zaman IE 8 ve mutlu altında yapmak için şu adımları atmalıdır

<!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 İÇİN
kaynak

4

tuzak:

<my-directive></my-directive>Geçici çözüm olmadan IE8'de çalışmayacağınız gibi kendi html öğenizi kullanma ( https://docs.angularjs.org/guide/ie )
Kendi html öğelerinizi kullanmak, html doğrulamasının başarısız olmasına neden olur.
Bir parametresi eşit olan yönergeler şu şekilde yapılabilir:

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

Bunun yerine:

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

Biz yok , çünkü eğer bu 2 gerçekleri kullanımı özel html elemanlarını.

Üçüncü taraf çerçevesine göre her yönerge iki şekilde yazılabilir:

<my-directive></my-directive>

veya

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

aynısını yapar.

— Konstantin Krass
kaynak

1

1'e eşit kapsam parametresine sahip bir yönerge oluşturmak istiyorsanız, bunu A ile yapmak daha kolaydır. Çünkü ek bir öznitelik oluşturmanız gerekmez.

— Konstantin Krass

Ek derken ne demek istiyorsun? Her iki alternatifin de tam olarak bir özelliği vardır.

— daha iyi bir oliver

3

Öğelerle ilgili 2 sorun:

Eski tarayıcılarda kötü destek.
SEO - Google'ın motoru onlardan hoşlanmıyor.

Öznitelikleri Kullanın.

— Amir Popovich
kaynak

Öğeler olarak yönergeler SEO sorununa neden olabilir mi? Şaşırdım. Peki ya replaceözniteliği true?

— chalasr

1

Bu iddiaların referanslara ihtiyacı var. Nokta 1 başka bir yerde oldukça sağlam, ancak Nokta 2 ile ilgili kaynakları görmek isterim.

— rinogo