javascript - AngularJS-direktiv Begränsa A vs E

Jag arbetar i ett litet team, bygger i AngularJS och försöker upprätthålla vissa grundläggande standarder och bästa praxis; särskilt eftersom vi är relativt nya med Angular.

Min fråga gäller direktiv. Mer exakt, restrict-alternativen.

Vissa av oss använder restrict: 'E' och har därmed <my-directive></my-directive> i HTML.

Andra använder restrict: 'A' och har <div my-directive></div> i html.

Sedan kan du naturligtvis använda restrict: 'EA' och använda någon av ovanstående.

Just nu är det ingen stor grej, men när det här projektet blir så stort som det kommer att bli vill jag att vem som helst som tittar på det enkelt ska förstå vad som pågår.

Finns det fördelar/nackdelar med antingen attribut- eller elementmetoden för att göra saker?

Finns det några fallgropar vi bör känna till om vi väljer till exempel element framför attribut?

Svar #1

restrict används för att definiera direktivtypen, och det kan vara A (Attribut), C (Klass), E (Element), och M (Kommentar), anta att namnet på direktivet är Doc :

Typ : Användning

A= <div Doc></div>

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

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

M= <!--directive:Doc -->

Svar #2

Enligt dokumentationen:

När ska jag använda ett attribut och när ska jag använda ett element? Använd ett element när du skapar en komponent som har kontroll över mallen. Det vanliga fallet för detta är när du skapar ett domänspecifikt språk för delar av din mall. Använd ett attribut när du dekorerar ett befintligt element med ny funktionalitet.

Redigera följande kommentar om fallgropar för ett komplett svar:

Om du antar att du bygger en app som ska köras på Internet Explorer <= 8, vilket stöd har upphört från AngularJS-teamet från AngularJS 1.3, måste du följa följande instruktioner för att få det att fungera: https://docs.angularjs.org/guide/ie

Svar #3

Alternativet restrict är vanligtvis inställt på:

• 'A' - matchar endast attributnamn
• 'E' - matchar endast elementnamn
• 'C' - matchar endast klassnamn
• 'M' - matchar endast kommentar

Här är dokumentationslänken.