AngularJS Direktive für den spezifischen Tag-Namen

8

Wie kann ich bestimmte Tags für eine Direktive in AngularJS erzwingen?

Ich möchte zum Beispiel eine Direktive erstellen, die nur auf <img> -Tags angewendet wird. Wenn der Benutzer diese Anweisung auf ein <div> setzt, möchte ich nicht, dass die Anweisung aktiv ist. Wie kann ich das tun?

    
Naor 16.04.2014, 13:25
quelle

4 Antworten

5

Sie haben 2 Möglichkeiten.

# 1 Verwenden Sie Ihre vorhandene Direktive, die Sie bearbeitet haben, und fügen Sie einige Zeilen hinzu

code:

%Vor%

# 2 Schränken Sie Ihre Anweisung auf ein Element ein (wie in der Antwort von Fizer Khan gezeigt).

%Vor%

HTML

%Vor%

Ich persönlich bevorzuge Option 2 am besten. Aber ich weiß, das kann entmutigender sein und führt oft zu anderen unerwarteten Dingen.

    
EnigmaRM 16.04.2014, 20:13
quelle
3

Einfachster Ansatz

Definieren Sie die Anweisung für ein bestimmtes HTML-Tag

Obwohl diese Frage schon lange gestellt wurde, gibt es keine Antwort, die eine Direktive für das erforderliche Element selbst erstellt. Hier ist eine weitere Möglichkeit, eine Angular-Direktive zu definieren, die sich auf IMG -Tags

beschränkt %Vor%

Dieser Code definiert eine Direktive für IMG element, aber wenn er initialisiert wird, prüft er, ob auf ihm eine bestimmte CSS-Klasse und / oder ein bestimmtes HTML-Attribut definiert ist. Wenn es keine hat, wird es elegant beendet, da dieses Bild nicht gerichtet sein sollte. Aber wenn etwas davon definiert ist, macht es seine Sache.

Beste Vorgehensweise

Zwei Direktiven für dasselbe Element mit Anforderungen

Das Folgende ist wahrscheinlich der bestmögliche Winkelansatz. IT besteht aus zwei Direktiven. Eine, die sich auf dem Element img befindet, und die andere, die eine Attribut / Klasse-Direktive ist und img Direktive benötigt.

%Vor%

Die zweite Direktive erfordert also eine img Direktive, die restriktiv für Bildelemente auf dem gleichen Element ist. Falls vorhanden, wird diese Direktive tatsächlich ausgeführt, andernfalls wird eine Laufzeitausnahme erzeugt, da ihre Anforderungen nicht erfüllt werden.

Dadurch werden beide Direktiven sehr einfach und ohne spezifischen Code, der bestimmte Bedingungen für die Ausführung der Anweisung überprüft. All diese Prüfungen werden bereits im Angular-Code durchgeführt und unsere Direktiven (die zweite / untergeordnete Zeile) werden nur auf Bildelementen ausgeführt, wenn beide vorhanden sind.

    
Robert Koritnik 22.01.2016 07:26
quelle
1

Sie können das Attribut restrict auf E in der Direktive

setzen %Vor%

Der Name des Tags lautet immer directive name.

Beispiel

%Vor%

Die einzige Möglichkeit, diese Direktive zu verwenden, ist

%Vor%     
Fizer Khan 16.04.2014 13:43
quelle
1

Id schlägt vor, dass Sie beide Ansätze unterstützen, da Angular nicht auf den Element-Tag-Namen beschränkt ist. Es kommt darauf an, wie Sie damit umgehen wollen, was in Ihrem Design ein Benutzerfehler ist. Der Benutzer sollte immer nur Ihre Direktive für ein img-Element verwenden, also was möchten Sie? Tun Sie, wenn sie Ihren Absichten nicht folgen? Wenn Sie den Fehler anmutig behandeln und dann fortfahren möchten fügen Sie ein IMG für sie ein und fahren Sie fort.

Zypern

%Vor%

    
mccainz 16.04.2014 20:19
quelle