Direttiva AngularJS Limita A vs E

113

Sto lavorando in un piccolo team, costruendo in AngularJS e cercando di mantenere alcuni standard e best practice di base; soprattutto dato che siamo relativamente nuovi con Angular.

La mia domanda riguarda le direttive. Più precisamente, le restrictopzioni.

Alcuni di noi usano restrict: 'E'quindi avere <my-directive></my-directive>in html.

Altri usano restrict: 'A'e hanno <div my-directive></div>in html.

Quindi, ovviamente, puoi usare restrict: 'EA'e utilizzare uno dei precedenti.

Al momento non è un grosso problema, anche se quando questo progetto sarà così grande vorrei che qualcuno lo guardasse per capire facilmente cosa sta succedendo.

Ci sono pro / contro nell'attributo o nel modo dell'elemento di fare le cose?

Ci sono delle insidie che dovremmo conoscere, se si sceglie di dire elemento anziché attributo?

javascript html angularjs

— Darren Wainwright
fonte

100

Secondo la documentazione :

Quando dovrei usare un attributo rispetto a un elemento? Utilizza un elemento quando crei un componente che ha il controllo del modello. Il caso comune per questo è quando crei un linguaggio specifico per il dominio per parti del tuo modello. Usa un attributo quando decori un elemento esistente con nuove funzionalità.

Modifica il seguente commento sulle insidie per una risposta completa:

Supponendo che tu stia creando un'app che dovrebbe essere eseguita su Internet Explorer <= 8, il cui supporto è stato abbandonato dal team di AngularJS da AngularJS 1.3, devi seguire le seguenti istruzioni per farlo funzionare: https: //docs.angularjs .org / guida / ie

— ngasull
fonte

3

Ho letto su e giù quei documenti ma mi sono perso questo :) grazie.

— Darren Wainwright

3

Questa spiegazione non copre eventuali insidie e pro / contro.

— Konstantin Krass

Ho aggiornato di conseguenza la mia risposta sulle insidie. Non ho menzionato i pro / contro perché penso che qui si parli più di best practice, specialmente quando consigliato e spiegato dal team di Angular.

— ngasull

1

"Non ho menzionato i pro / contro perché penso che qui si parli di più delle migliori pratiche, soprattutto quando consigliate e spiegate dal team di Angular". eh? :)

— Alexander Mills

169

Limit serve a definire il tipo di direttiva e può essere A(Attribute), C(Class), E(Element) e M(coMment), supponiamo che il nome della direttiva sia Doc:

Tipo: utilizzo

A = <div Doc></div>

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

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

M = 

— Seif Tamallah
fonte

2

meno chiara della risposta di @nikunj, ma dopo aver visto la loro risposta capisco la tua ...

— Alexander Mills

47

L'opzione di restrizione è in genere impostata su:

"A": corrisponde solo al nome dell'attributo
'E' - corrisponde solo al nome dell'elemento
"C": corrisponde solo al nome della classe
"M": corrisponde solo al commento

Ecco il link alla documentazione .

— nikunj gandhi
fonte

semplice e pulito

— Gaurav_0093

7

L'elemento non è supportato in IE8 immediatamente, devi fare del lavoro per far sì che IE8 accetti tag personalizzati.

Un vantaggio dell'utilizzo di un attributo su un elemento è che puoi applicare più direttive allo stesso nodo DOM. Ciò è particolarmente utile per cose come i controlli del modulo in cui è possibile evidenziare, disabilitare o aggiungere etichette ecc. Con attributi aggiuntivi senza dover racchiudere l'elemento in un mucchio di tag.

— Jack Allan
fonte

5

Una delle insidie che so è il problema di IE con gli elementi personalizzati. Come citato dai documenti :

3) non usi tag di elementi personalizzati come (usa invece la versione dell'attributo)

4) se utilizzi tag di elementi personalizzati, devi seguire questi passaggi per rendere felice IE 8 e versioni precedenti

<!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
fonte

4

Pitfall:

Usare il tuo elemento html come <my-directive></my-directive>non funzionerà su IE8 senza soluzione alternativa ( https://docs.angularjs.org/guide/ie )
L'uso dei propri elementi html renderà la convalida html fallita.
Le direttive con un parametro uguale possono fare in questo modo:

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

Invece di questo:

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

Noi dont uso elementi HTML personalizzati, perché se questi 2 fatti.

Ogni direttiva di framework di terze parti può essere scritta in due modi:

<my-directive></my-directive>

o

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

fa lo stesso.

— Konstantin Krass
fonte

1

se si desidera creare una direttiva con un parametro di ambito uguale a 1, è più facile farlo con A. Perché non è necessario creare un attributo aggiuntivo.

— Konstantin Krass

Cosa intendi per aggiuntivo? Entrambe le alternative hanno esattamente un attributo.

— un oliver migliore

3

2 problemi con gli elementi:

Cattivo supporto con i vecchi browser.
SEO: al motore di Google non piacciono.

Usa attributi.

— Amir Popovich
fonte

Le direttive come elementi possono causare problemi di SEO? Sono sorpreso. E l' replaceattributo a true?

— chalasr

1

Queste affermazioni richiedono riferimenti. Il punto 1 è abbastanza consolidato altrove, ma mi piacerebbe vedere le fonti sul punto 2.

— rinogo