AngularJS-Direktive beschränkt A vs. E

Lesezeit: 2 Minuten

Benutzer-Avatar
Darren Wainwright

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

Meine Frage bezieht sich auf Richtlinien. Genauer gesagt, die restrict Optionen.

Einige von uns verwenden restrict: 'E' somit haben <my-directive></my-directive> im html.

Andere verwenden restrict: 'A' und haben <div my-directive></div> im html.

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

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

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

Gibt es Fallstricke, die wir kennen sollten, wenn wir z. B. ein Element einem Attribut vorziehen?

Benutzer-Avatar
Seif Tml

restriktiv dient der Definition des Direktiventyps, und das kann es sein A (Attribut), C (Klasse), E (Element) und M (comment) , 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 -->

  • weniger klar als die Antwort von @nikunj, aber nachdem ich ihre Antwort gesehen habe, verstehe ich deine …

    – Alexander Mills

    6. Juli 2017 um 22:02 Uhr

  • @AlexanderMills Nicht, dass es eine bessere oder schlechtere Antwort darauf wäre, aber es ist fast genau dasselbe wie was steht in der AngularJS-Dokumentation.

    – Rufin

    28. Juli 2021 um 20:43 Uhr

  • Daumen hoch für den Entwickler, der sich diese kurzen Buchstaben ausgedacht hat, damit die Leute erraten, was sie bedeuten.

    – Webmaster

    26. Juli um 12:00 Uhr

Benutzer-Avatar
ngasull

Entsprechend die Dokumentation:

Wann sollte ich ein Attribut im Vergleich zu einem Element verwenden? Verwenden Sie ein Element, wenn Sie eine Komponente erstellen, die die Vorlage steuert. Der häufigste Fall dafür ist, wenn Sie eine domänenspezifische Sprache für Teile Ihrer Vorlage erstellen. Verwenden Sie ein Attribut, wenn Sie ein vorhandenes Element mit einer neuen Funktionalität ausstatten.

Bearbeiten Sie den folgenden Kommentar zu Fallstricken für eine vollständige Antwort:

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

  • Ich habe diese Dokumente rauf und runter gelesen, aber dieses hier verpasst 🙂 danke.

    – Darren Wainwright

    22. April 2014 um 14:09 Uhr

  • Diese Erklärung deckt keine Fallstricke und Vor-/Nachteile ab.

    – Konstantin Krass

    22. April 2014 um 14:33 Uhr

  • Meine Antwort zu Fallstricken wurde entsprechend aktualisiert. Ich habe keine Vor- und Nachteile erwähnt, weil ich denke, dass wir hier mehr über Best Practices sprechen, insbesondere wenn sie vom Angular-Team empfohlen und erklärt werden.

    – ngasull

    22. April 2014 um 14:44 Uhr


  • ” Ich habe keine Vor- und Nachteile erwähnt, weil ich denke, dass wir hier mehr über Best Practices sprechen, insbesondere wenn sie vom Angular-Team empfohlen und erklärt werden.” hm? 🙂

    – Alexander Mills

    6. Juli 2017 um 22:01 Uhr

Benutzer-Avatar
Nikunj Gandhi

Die Einschränkungsoption ist normalerweise auf Folgendes eingestellt:

  • ‘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 Kommentar überein

Hier ist der Dokumentationslink.

  • einfach und sauber

    – Gaurav_0093

    8. Februar 2018 um 12:29 Uhr

Benutzer-Avatar
Jack Allan

Element wird in IE8 nicht standardmäßig unterstützt. Sie müssen etwas tun, 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 Dinge wie 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 einpacken zu müssen.

Eine der Fallstricke, die ich kenne, ist das IE-Problem mit benutzerdefinierten Elementen. Wie zitiert aus der Dokumente:

3) du unterlassen Sie Verwenden Sie benutzerdefinierte Element-Tags wie (verwenden Sie stattdessen die Attributversion)

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

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

Benutzer-Avatar
Konstantin Krass

Falle:

  1. Verwenden Sie Ihr eigenes HTML-Element wie <my-directive></my-directive> funktioniert nicht auf IE8 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 gleichem Parameter können wie folgt ausgeführt werden:

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

An Stelle von:

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

Wir nicht Verwenden Sie benutzerdefinierte HTML-Elemente, denn wenn dies 2 Fakten sind.

Jede Richtlinie von Drittanbieter-Frameworks kann auf zwei Arten geschrieben werden:

<my-directive></my-directive>

oder

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

macht das gleiche.

Benutzer-Avatar
Amir Popowitsch

2 Probleme mit Elementen:

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

Verwenden Sie Attribute.

  • Richtlinien als Elemente können SEO-Probleme verursachen ? Ich bin überrascht. Und was ist mit der replace zuschreiben true?

    – chalasr

    25. Dezember 2015 um 14:59 Uhr


  • Diese Ansprüche benötigen Referenzen. Punkt 1 ist an anderer Stelle ziemlich gut etabliert, aber ich würde gerne Quellen zu Punkt 2 sehen.

    – Rinogo

    8. September 2016 um 16:24 Uhr


1245720cookie-checkAngularJS-Direktive beschränkt A vs. E

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy