AngularJS-Richtlinie A gegen E einschränken

112

Ich arbeite in einem kleinen Team, baue AngularJS ein und versuche, einige grundlegende Standards und Best Practices beizubehalten. vor allem, weil wir mit Angular relativ neu sind.

Meine Frage bezieht sich auf Richtlinien. Genauer gesagt, die restrictOptionen.

Einige von uns verwenden restrict: 'E'also <my-directive></my-directive>in der HTML.

Andere verwenden restrict: 'A'und haben <div my-directive></div>in der HTML.

Dann können Sie natürlich restrict: 'EA'eines der oben genannten verwenden und verwenden.

Im Moment ist es keine große Sache, aber wenn dieses Projekt so groß ist, wie es nur geht, möchte ich, dass jeder, der es sich ansieht, leicht versteht, was los ist.

Gibt es Vor- / Nachteile für die Attribut- oder Elementmethode?

Gibt es Fallstricke, die wir kennen sollten, wenn wir "say element" anstelle von "attribute" wählen?

javascript html angularjs Darren Wainwright
quelle

Antworten:

100

Laut Dokumentation :

Wann sollte ich ein Attribut gegenüber einem Element verwenden? Verwenden Sie ein Element, wenn Sie eine Komponente erstellen, die die Kontrolle über die Vorlage hat. Dies ist häufig der Fall, wenn Sie eine domänenspezifische Sprache für Teile Ihrer Vorlage erstellen. Verwenden Sie ein Attribut, wenn Sie ein vorhandenes Element mit neuen Funktionen dekorieren.

Bearbeiten Sie den folgenden Kommentar zu Fallstricken, um eine vollständige Antwort zu erhalten:

Angenommen, Sie erstellen eine App, die unter Internet Explorer <= 8 ausgeführt werden soll und deren Unterstützung vom AngularJS-Team aus AngularJS 1.3 eingestellt wurde, müssen Sie die folgenden Anweisungen befolgen, damit sie funktioniert: https: //docs.angularjs .org / guide / ie

ngasull
quelle
3
Ich habe diese Dokumente auf und ab gelesen, aber diese verpasst :) danke.
Darren Wainwright
3
Diese Erklärung deckt keine Fallstricke und Vor- / Nachteile ab.
Konstantin Krass
Meine Antwort zu Fallstricken wurde entsprechend aktualisiert. Ich habe die Vor- und Nachteile nicht erwähnt, weil ich denke, dass wir hier mehr über Best Practices sprechen, insbesondere wenn dies vom Angular-Team empfohlen und erklärt wird.
Ngasull
1
"Ich habe Vor- und Nachteile nicht erwähnt, weil ich denke, dass wir hier mehr über Best Practices sprechen, insbesondere wenn dies vom Angular-Team empfohlen und erklärt wird." huh? :)
Alexander Mills
169

einschränken dient zum Definieren des Direktiventyps und kann A(Attribut), C(Klasse), E(Element) und M(coMment) sein. Nehmen wir an, der Name der Direktive lautet Doc:

Typ: Verwendung

A = <div Doc></div>

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

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

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

Seif Tamallah
quelle
2
weniger klar als die Antwort von @nikunj, aber nachdem ich ihre Antwort gesehen habe, verstehe ich Ihre ...
Alexander Mills
47

Die Einschränkungsoption ist normalerweise auf Folgendes festgelegt:

  • 'A' - stimmt nur mit dem Attributnamen überein
  • 'E' - stimmt nur mit dem Elementnamen überein
  • 'C' - stimmt nur mit dem Klassennamen überein
  • 'M' - stimmt nur mit dem Kommentar überein

Hier ist der Dokumentationslink .

Nikunj Gandhi
quelle
einfach und sauber
Gaurav_0093
7

Element wird in IE8 nicht sofort unterstützt. Sie müssen einige Arbeiten ausführen, damit IE8 benutzerdefinierte Tags akzeptiert.

Ein Vorteil der Verwendung eines Attributs gegenüber einem Element besteht darin, dass Sie mehrere Anweisungen auf denselben DOM-Knoten anwenden können. Dies ist besonders praktisch für Formularsteuerelemente, bei denen Sie Beschriftungen usw. mit zusätzlichen Attributen hervorheben, deaktivieren oder hinzufügen können, ohne das Element in eine Reihe von Tags einschließen zu müssen.

Jack Allan
quelle
5

Wie ich weiß, ist eine der Fallstricke das IE-Problem mit benutzerdefinierten Elementen. Wie aus den Dokumenten zitiert :

3) Sie verwenden keine benutzerdefinierten Element-Tags wie (verwenden Sie stattdessen die Attributversion)

4) , wenn Sie verwenden Sie benutzerdefinierte Element - Tags, dann müssen Sie diese Schritte unternehmen , um IE zu machen 8 und unten glücklich

<!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
quelle
4

Falle:

  1. Die Verwendung eines eigenen HTML-Elements <my-directive></my-directive>funktioniert unter IE8 nicht ohne Problemumgehung ( https://docs.angularjs.org/guide/ie ).
  2. Wenn Sie Ihre eigenen HTML-Elemente verwenden, schlägt die HTML-Validierung fehl.
  3. Direktiven mit einem Parameter können folgendermaßen ausgeführt werden:

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

An Stelle von:

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

Wir nicht verwenden benutzerdefinierte HTML - Elemente, denn wenn dieses Bild 2 Fakten.

Jede Direktive von Drittanbietern kann auf zwei Arten geschrieben werden:

<my-directive></my-directive>

oder

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

macht das gleiche.

Konstantin Krass
quelle
1
Wenn Sie eine Direktive mit einem Bereichsparameter von 1 erstellen möchten, ist dies mit A einfacher. Da Sie kein zusätzliches Attribut erstellen müssen.
Konstantin Krass
Was meinst du mit zusätzlich? Beide Alternativen haben genau ein Attribut.
Ein besserer Oliver
3

2 Probleme mit Elementen:

  1. Schlechte Unterstützung mit alten Browsern.
  2. SEO - Googles Engine mag sie nicht.

Attribute verwenden.

Amir Popovich
quelle
Richtlinien als Elemente können SEO-Probleme verursachen? Ich bin überrascht. Und was ist mit dem replaceAttribut zu true?
Chalasr
1
Diese Ansprüche benötigen Referenzen. Punkt 1 ist anderswo ziemlich gut etabliert, aber ich würde gerne Quellen über Punkt 2 sehen.
Rinogo