Beim Definieren von Direktiven in AngularJS gibt es drei verschiedene Möglichkeiten, Variablen zu übergeben: kein Bereich, geerbter Bereich oder isolierter Bereich. Unabhängig davon, ob Sie die Syntax „Controller as“ verwenden oder nicht (und ich hoffe, Sie sind es), müssen Sie sich noch entscheiden, welche Sie verwenden möchten. In diesem Beitrag erkläre ich die Unterschiede und schlage vor, warum Sie jeden einzelnen verwenden möchten oder nicht.

Kein Gültigkeitsbereich

 scope: false 

Die Verwendung dieser Art von Direktive scope ist normalerweise eine schlechte Praxis, die vermieden werden sollte. Wenn Sie diese Option auswählen, geben Sie an, dass Ihre Direktive keinen eigenen Gültigkeitsbereich hat und einen Gültigkeitsbereich mit dem übergeordneten Controller teilt. Alles, was der übergeordnete Controller mutiert oder dem Gültigkeitsbereich hinzufügt, ist in der Direktive vorhanden und umgekehrt.

Mein vorheriger Blogbeitrag zeigte ein positives Beispiel für die Verwendung von scope: false in Direktiven. In diesem Beispiel habe ich es verwendet, um DOM in der Vorlage meiner Direktive der obersten Ebene sauber auszutauschen, und alle Direktiven dienten demselben einfachen Zweck (Wechseln von Doms) in meiner Anwendung. Ich denke, scope: false kann eine großartige Möglichkeit sein, Organisation und Lesbarkeit in eine Vorlage einzuführen, aber darüber hinaus kann die Verwendung ein rutschiger Abhang für Spaghetti-Code sein, der schwer zu verstehen ist.

Geerbter Bereich

scope: true

Der geerbte Bereich ist für die Daten Ihres übergeordneten Controllers viel sicherer als kein Bereich. Wie bei der Option scope: false ist alles, was im Bereich des übergeordneten Controllers vorhanden ist, in der Direktive vorhanden. Alles, was die Direktive dem Bereich hinzufügt, wird jedoch nicht mit dem übergeordneten Bereich geteilt. Dies schützt die Daten des übergeordneten Controllers und ermöglicht gleichzeitig die gemeinsame Nutzung mit der Direktive.

scope: true ist nützlich in Situationen, in denen die untergeordnete Direktive dazu dient, Daten im übergeordneten Bereich zu mutieren. Obwohl es sicherer ist als scope:false , ist die Verwendung des geerbten Bereichs, insbesondere wiederholt, ein architektonischer Geruch.

Isolierter Bereich

scope: { myProperty: '='}

Isolierter Bereich ist die beste Vorgehensweise von allen. Mit dieser Option legt der Programmierer fest, welche Attribute an die Direktive übergeben werden. Nichts anderes wird zwischen übergeordnetem Controller und Direktive geteilt.

Isolated scope fördert (und erzwingt) eine gute SPA-Architektur und die Entwicklung kleiner, fokussierter Komponenten. Die Verwendung eines isolierten Bereichs (insbesondere mit der Syntax „Controller as“) ist ein Zeichen für eine gute Architektur und führt zu einer Direktive, die leicht in eine Angular 2.0-Komponente konvertiert werden kann.

…Also, was benutze ich?

Alles hängt davon ab! In einer perfekten Angular-Anwendung würden Sie in allen Ihren Direktiven einen isolierten Bereich verwenden. Allerdings sind nicht alle Anwendungen perfekt und nicht alle Regeln sind absolut.

  • Die Verwendung von no scope kann hilfreich sein, um Ihre Vorlagen zu organisieren.
  • Die Verwendung des geerbten Bereichs kann Ihnen helfen, keine Bereichsanweisungen umzugestalten. Es ist auch nützlich für die Verwaltung von Architekturen, die sich darauf konzentrieren, Daten in der Direktive zu mutieren, anstatt kleine aktualisierte Daten in der Struktur an den übergeordneten Controller zurückzugeben.
  • Für eine reibungslose Angular 2.0-Migration sollten Sie darauf hinarbeiten, in Ihrer Anwendung nur einen isolierten Bereich zu verwenden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.