AngularJS: ngInclude vs Direktive


93

Ich verstehe nicht ganz, wann ich eine Direktive verwenden soll und wann es angemessener wäre, nginclude zu verwenden. Nehmen Sie dieses Beispiel: Ich habe einen Teil, password-and-confirm-input-fields.htmldas ist der HTML-Code zum Eingeben und Bestätigen eines Passworts. Ich benutze dies sowohl unter der Anmeldeseite als auch unter der Seite zum Ändern des Passworts. Diese beiden Seiten haben jeweils einen Controller, das teilweise HTML hat keinen dedizierten Controller.

Soll ich die Richtlinie verwenden oder ngIncludedafür?


Ich würde jedes Mal eine Anweisung befolgen, aber ich bin gespannt, was erfahrene Angular-Leute sagen würden.
Austin Mullins

1
Wenn es sich wirklich um eine unabhängige Komponente handelt, sollte ihr wahrscheinlich ein eigener Controller zugeordnet sein. IMO, ich würde einen Teil verwenden - aber ich bin neugierig auf weitere Eingaben
tymeJV

4
Wenn für diesen Teil js-Code benötigt wird, verwenden Sie eine Direktive. Wenn es sich nur um HTML handelt, verwenden Sie ngInclude.
Daniel Beck

Antworten:


122

Es hängt alles davon ab, was Sie von Ihrem Codefragment erwarten. Persönlich, wenn der Code keine Logik hat oder nicht einmal einen Controller benötigt, dann gehe ich mit ngInclude. Normalerweise füge ich große "statischere" HTML-Fragmente hinzu, die die Ansicht hier nicht überladen sollen. (dh: Nehmen wir an, eine große Tabelle, deren Daten ohnehin vom übergeordneten Controller stammen. Es ist sauberer <div ng-include="bigtable.html" />als all diese Zeilen, die die Ansicht überladen.)

Wenn es Logik oder DOM-Manipulation gibt oder wenn Sie möchten, dass sie in verschiedenen Fällen anpassbar ist (auch bekannt als anders rendern), dann directivesist dies die bessere Wahl (sie sind zunächst entmutigend, aber sie sind sehr leistungsfähig, geben Sie ihr Zeit). .

ngInclude

Manchmal werden Sie sehen, ngInclude'sdass von ihrem Äußeren $scope/ betroffen sind interface. Wie zum Beispiel ein großer / komplizierter Repeater. Diese beiden Schnittstellen sind deshalb miteinander verbunden. Wenn sich etwas in der Hauptsache $scopeändert, müssen Sie Ihre Logik innerhalb Ihres eingeschlossenen Teils ändern.

Richtlinien

Auf der anderen Seite, Richtlinien können explizite Tive / controllers / usw. Also , wenn Sie denken an ein Szenario , in dem Sie die Wiederverwendung etwas mehrere Male haben möchten, können Sie sehen , wie würde seine eigenen Rahmen verbunden ist das Leben leichter machen und weniger verwirrend.

Außerdem sollten Sie immer dann, wenn Sie überhaupt mit dem DOM interagieren, eine Direktive verwenden. Dies macht es besser zum Testen und entkoppelt diese Aktionen von einem Controller / Service / etc, was Sie wollen!

Tipp: Stellen Sie sicher, dass Sie nicht einschränken: 'E' verwenden, wenn Sie sich für IE8 interessieren! Es gibt Möglichkeiten, dies zu umgehen, aber sie sind ärgerlich. Machen Sie einfach das Leben leichter und bleiben Sie bei Attribut / etc.<div my-directive />

Komponenten [Update 01.03.2016]

In Angular 1.5 hinzugefügt, handelt es sich im Wesentlichen um einen Wrapper .directve(). Die Komponente sollte die meiste Zeit verwendet werden. Es entfernt viel Code von Boilerplate-Anweisungen, indem standardmäßig Dinge wie verwendet werden restrict: 'E', scope : {}, bindToController: true. Ich empfehle dringend, diese für fast alles in Ihrer App zu verwenden, um einfacher auf Angular2 umsteigen zu können.

Abschließend:

Sie sollten die meiste Zeit Komponenten und Richtlinien erstellen .

  • Erweiterbarer
  • Sie können Ihre Datei extern vorlegen und haben (wie ngInclude).
  • Sie können den übergeordneten Bereich oder einen eigenen isolierten Bereich innerhalb der Direktive verwenden.
  • Bessere Wiederverwendung in Ihrer gesamten Anwendung


Update 01.03.2016

Jetzt, da Angular 2 langsam fertig ist und wir das allgemeine Format kennen (natürlich wird es hier und da noch einige Änderungen geben), wollte ich nur hinzufügen, wie wichtig es ist components(manchmal Anweisungen, wenn Sie sie einschränken müssen: ' E 'zum Beispiel).

Komponenten sind Angular 2 sehr ähnlich@Component . Auf diese Weise kapseln wir Logik und HTML im selben Bereich.


Stellen Sie sicher, dass Sie so viele Dinge wie möglich in Komponenten einkapseln. Dies erleichtert den Übergang zu Angular 2 erheblich! (Wenn Sie sich für den Übergang entscheiden)

Hier ist ein schöner Artikel, der diesen Migrationsprozess beschreibt directives(sehr ähnlich, wenn Sie natürlich Komponenten verwenden würden): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/


5
Ich stimme dieser Antwort zu. Die Lernkurve für Richtlinien ist steil, aber sie zahlt sich wirklich aus, sobald Sie sie erhalten.
Jazzy

@mcpDESIGNS, ein Fall, der möglicherweise nicht perfekt zu dieser Antwort passt (zumindest nicht die beiden ersten Absätze). Wenn ich ein Navi-Partial mit einem eigenen Controller habe und dieses nur einmal verwenden werde (in der index.html-Datei), sollte dies wahrscheinlich ein Partial und keine Direktive sein, da es nur einmal verwendet wird (es ist) Art einer separaten App in dem Sinne, dass sie nicht Teil der ngview ist), auch wenn sie eine eigene Logik hat. Oder?
EricC

Dies ist immer noch verwirrend. Sie können auch einen Controller angeben, wenn Sie ngInclude verwenden. Sehen Sie sich dies an: stackoverflow.com/questions/13811948/…
Marwen Trabelsi

1
Natürlich, aber es ist immer in irgendeiner Weise vollständig mit dem übergeordneten Controller verbunden. Wo eine Direktive einen Controller in sich selbst erstellen kann , wenn die Vorlage geladen wird. Es kann völlig getrennt sein (wenn Sie wollen)
Mark Pieszak - Trilon.io

1
Das Beste, was Sie tun können, ist, dieses Konzept in eine Fabrik oder so etwas zu abstrahieren. Auf diese Weise können Sie es einfach innerhalb einer linkFunktion und voila aufrufen! Es wäre ohne Zweifel schön in Direktiven gebacken worden :( @Arwin
Mark Pieszak - Trilon.io
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.