Ich bin gerade auf dieses Problem gestoßen und frage mich, ob es sich um einen Fehler oder ein erwartetes Verhalten handelt. Dies ist nur ein kleines Beispiel, um das Problem zu zeigen. Der folgende Code wird in beiden Beispielen verwendet:
%Vor%
Das erste Beispiel hat diese item-directive.html, die in der richtigen Reihenfolge wie erwartet gerendert wird
%Vor% Aber das zweite Beispiel - mit der folgenden item-directive.html - enthält ein ng-if , was dazu führt, dass die Liste in umgekehrter Reihenfolge gerendert wird?
-------- UPDATE ----------
Ich habe gerade bemerkt (was sich auf das in @ squiroid's Antwort erwähnte Problem bezieht), dass der isolierende Bereich in diesem Beispiel nicht wirklich funktioniert. Es scheint so zu sein, aber item wird dem item-directive Bereich (oder vielmehr dem Bereich, in dem es endet) vom ng-repeat zur Verfügung gestellt, nicht vom isolieren Bereich. Wenn Sie versuchen, andere Werte auf dem isolate-Bereich festzulegen, obwohl sie in dem Bereich angezeigt werden, der an die Link- und Controller-Funktionen der Direktive übergeben wird (wie in der Konsolenausgabe für den PLNKR zu sehen ist), sind sie nicht verfügbar Vorlage. Es sei denn, Sie entfernen replace .
Plunkr zeigt den Bereich für defekte Isolate
Plunkr zeigt einen fixierten Isolat-Bereich, wenn replace: false
ist
--- UPDATE 2 ---
Ich habe beide Beispiele aktualisiert, um zu zeigen, dass das Problem weiterhin auftritt, sobald der isolate-Bereich entfernt wurde
Plunkr ohne ng-if und isolate-Bereich
Plunkr mit ng-if und isolate-Geltungsbereich
Und auch eine neue Version, die den Wechsel von templateUrl zu Template zeigt - wie von @Manube vorgeschlagen - zeigt das Verhalten, das wie erwartet funktioniert
Plunkr mit ng-if und no isolate scope mit Vorlage anstelle von templateUrl
Dies geschieht mit der Kombination von replace: 'true' und ng-if auf dem root-Element.
Stellen Sie sicher, dass der Inhalt Ihres html in der templateUrl genau ein Wurzelelement hat.
Wenn Sie ng-if auf span setzen
%Vor%Nun, warum es passiert, geschieht dies, weil die ngIf-Direktive einen Teil des DOM-Baums basierend auf einem {Ausdruck} entfernt oder neu erstellt. Wenn der zu ngIf zugewiesene Ausdruck einen falschen Wert ergibt, wird das Element aus dem DOM entfernt, andernfalls wird ein Klon des Elements in das DOM eingefügt.
was beim Rendern zu keinem Root-Element auf der templateUrl führen kann und somit zu unerwünschtem Verhalten führt.
Es geht um templateUrl, das asynchron ist;
Wenn Sie templateUrl durch
ersetzen %Vor%Es wird wie erwartet funktionieren: siehe bottom mit Vorlage anstelle von templateUrl
Der Test <div ng-if="item.type === 'test'"> wird ausgeführt, wenn der Bereich bereit ist und die VorlageUrl abgerufen wurde.
Da das Holen der Vorlage asynchron ist, führt die jeweils zuerst zurückgegebene Vorlage den Test aus und zeigt das Element an.
Jetzt ist die Frage: Warum ist es immer die letzte Vorlage, die zuerst zurückkommt?
Der zweite wird in umgekehrter Reihenfolge angezeigt, da die benutzerdefinierte Direktive mit dem Namen der Element-Direktive definiert wurde, aber aufgrund von replace = true nicht in DOM gerendert wird.
Weitere Informationen finden Sie in diesem Link
Tags und Links angularjs