Dynamische Hinzufügung von Winkeldirektiven

Sie sollten Elemente mit Angular nicht dynamisch zur Seite hinzufügen. Viele Leute, mich eingeschlossen, die aus einem jQuery-Hintergrund stammen, gehen davon aus, dass wir mit dieser Übung fortfahren können und Dinge einfach so zur Seite hinzufügen, wie wir sie brauchen.

Bei Angular sollte die Logik jedoch wirklich im Markup sichtbar sein. Was bedeutet das? In Ihrem Fall sollten Sie die Direktive dort haben, egal was, und dann kontrollieren Sie ihre Sichtbarkeit mit ng-show oder ng-hide oder ng-class .

Also, so etwas wäre das Beste:

Und dann können Sie Ihre Anweisung verwenden, wie Sie programmiert haben.

Beachten Sie, dass Sie auch einen Inline-Controller definieren können (ordnen Sie ein Array von Abhängigkeiten und eine Funktion dieser Abhängigkeiten als controller -Eigenschaft Ihrer Anweisung zu). Das hält alle verwandten Code an der gleichen Stelle.

z. B.

Anstatt dynamisch von Ihrem Controller aus zu kompilieren, schlage ich vor, dass Sie ng-if verwenden, um deklarativ auszudrücken, welche DOM-Elemente im DOM existieren sollen.

HTML

JS

  

Ich möchte eine Richtlinie von einem Controller zu meiner Seite hinzufügen.

Sie sollten eine boolesche Variable im $ scope definieren können, die bestimmt, ob die Anmeldung angezeigt werden soll oder nicht.

Sie können dies dann in der Vorlage mit der Anweisung ngIf verwenden, um nur die Anmeldevorlage anzuzeigen, wenn diese Variable auf

Sie können dies in Ihrem modifizierten JSFiddle unter

Ссылка

Ich habe auch eine Schaltfläche hinzugefügt, so dass Sie in der Konsole sehen können, dass die Funktion link nur nach dem Drücken der Schaltfläche ausgeführt wird, und loginShouldBeShowing wird auf true

  

Ich kann viele Beispiele für ähnliche im Web finden, wenn das Direktiven-Tag auf der Seite zum Zeitpunkt des Ladens ist, und kann diese gut funktionieren, so dass das ist, was macht, dass es mit der $ compile-Methode in Beziehung steht. p>

Nach meinem Verständnis und der vorherigen Verwendung ist es üblich, Direktiven in die Vorlage einzufügen, die nur in bestimmten Situationen verwendet werden, d. h. wenn bestimmte $ scope-Variablen auf bestimmte Werte gesetzt sind, mit ngIf oder vielleicht ngSwitch oder ngShow. Ich denke, die Dinge würden bald sehr unordentlich werden, wenn Sie versuchen würden, jeden Teil der Vorlage zu kompilieren, der zu irgendeinem Zeitpunkt verwendet werden kann oder nicht. Obwohl ich nur ein relativer Anfänger in AngularJS bin, musste ich bisher nur $ compile verwenden, wenn ich Attribute von benutzerdefinierten Direktiven bewertete, also

muss dann $ compile verwenden, um doThisFunction() an einem geeigneten Punkt aufzurufen.

Als kleine Seitenleiste weisen die Namen Ihrer Variablen darauf hin, dass Sie sich im Controller mit den Vorgängen in der Vorlage befassen. Es ist üblicher, eine Art Modell- / Geschäftszustand im Controller beizubehalten und dann das entsprechende Objekt in der Vorlage anzuzeigen. Sie könnten also in der Steuerung:

Und dann in der Vorlage:

Bearbeiten: Ich habe auch bemerkt, dass die Login-Direktive in einem anderen Modul als der Rest der App war. Ich vermute, dass dies zu Problemen führte, also änderte ich diesen Aspekt in meinem JSFiddle so, dass es nur das eine Modul gab.

Bearbeiten: Ich denke, ich bin verwirrt zwischen $ compile und $ parse oben, also würde ich gegen die Dokumente / andere Quellen über meine Verwendung von $ compile überprüfen.