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?
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.
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
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.
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.
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.
Sie können das Attribut restrict
auf E
in der Direktive
Der Name des Tags lautet immer directive
name.
Beispiel
%Vor%Die einzige Möglichkeit, diese Direktive zu verwenden, ist
%Vor%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.
%Vor%
Tags und Links javascript angularjs angularjs-directive