Direktive mit eigenem Controller innerhalb von ngAnimateSwap führt dazu, dass ein neuer Controller bei jedem 'swap' initialisiert wird

Question

Ich habe eine Direktive (ParentDir) erstellt, die einen eigenen Controller hat und deren Template an diesen Controller bindet. Es kommuniziert mit einer anderen Direktive (Child1), die über einen eigenen Controller verfügt, der die erste Parent-Direktive "benötigt". Im Folgenden ist ein vereinfachtes Beispiel:

Module.directive("ParentDir", function() { 
return { 
    templateUrl: '../ParentTemplate', 
    restrict: 'AEC', 
    scope: {  
     }, 
    controllerAs: 'parCtrl', 
    bindToController: true, 
    controller: ['$scope', function ($scope) { 
     parCtrl= this; 
     parCtrl.title = "PARENT 1 TITLE"; 
     }]} 


Module.directive("Child1", function() { 
return { 
    templateUrl: '../Child1Template', 
    restrict: 'AEC', 
    require: '^^ParentDir', 
    scope: {}, 
    controllerAs: 'ch1Ctrl', 
    bindToController: true, 

    link: function ($scope, element, attrs, parCtrl) { 
     $scope.parCtrl= parCtrl; 
    }, 

    controller: ['$scope', function ($scope) { 
      ch1Ctrl= this; 
      ch1Ctrl.title = "CHILD 1 TITLE"; 
}]} 

ParentDir html:

 <child1> </child1> 

Child1 html:

{{parCtrl.title}} 
    {{ch1Ctrl.title}} 

Schließlich mein ParentDirective ist in etwa wie folgt initialisiert:

<div ng-animate-swap="trigger" class="swapclass"> 
     <parent-dir></parent-dir> 
    </div> 

ich brauche T Die Vorlage der gesamten übergeordneten Richtlinie wird in bestimmten Fällen verschoben. Ich benutze die Direktive auch an anderen Orten, an denen ich das nicht brauche und ich kann sie so verwenden wie sie ist. In den Fällen, in denen ich die Folienanimation brauche, platziere ich sie wie oben gezeigt in einem ng-animate-swap. Das Problem ist, dass jedes Mal, wenn sich der Auslagerungstrigger ändert, ein neuer parCtrl initialisiert wird, was bewirkt, dass alles zurückgesetzt wird!

Wie kann ich Animate Swap mit einer Direktive verwenden, die einen isolierenden Bereich und einen eigenen Controller hat, ohne den Controller jedes Mal neu zu initialisieren, wenn ein Austausch stattfindet?

Answer 1

Direktiven, wie wir wissen, sind High-Level-Marker, die dem Angular-Compiler mitteilen, ein bestimmtes Verhalten an dieses HTML-Element anzuhängen. Wenn eine Anweisung auf das DOM gesetzt wird, vergleicht der Dienst $compile von Angular die Namen der Direktiven mit ihrem Code, normalisiert ihn und führt ihn aus.

Allerdings entfernt ng-animate-swap sein Element aus dem DOM vor dem Hinzufügen des neuen.

Dies bedeutet, dass Ihre Anweisungen für jeden Austausch neu kompiliert werden, und neue isolierte Bereiche werden bei jeder Animation erstellt.

Die Lösung hierfür auf die Funktionalität Ihrer Anwendung abhängt, wie groß Ihre Vorlagen sind und wie oft müssen Sie die Animation tun (oder das, was die Animation bringt):

Eine Lösung ist eine weitere Richtlinie erstellen außerhalb der Swap-Animation, die parCtrl.title und ch1Ctrl.title (oder was auch immer andere Variablen, die Sie haben) und dann in der Lage, passieren, dass Informationen nach unten auf das Kind prototypische Vererbung Tive durch hält:

mit einem Controller werden

<swap-dir> 
     <div ng-animate-swap="trigger" class="swapclass"> 
     <parent-dir></parent-dir> 
     </div> 
    <swap-dir> 

Dies könnte auch geschehen, vielleicht viel einfacher. Was Sie tun möchten, hängt davon ab, woher Sie Ihre Scope-Variablen beziehen und wie viele verschiedene Elemente Sie auf der Seite haben.

jedoch ng-animate-swap seine eigenen Rahmen schafft, also, während ich das glauben würde funktionieren, die immer Spaß JavaScript Erbe Spielereien könnte ein Problem verursachen auch hier. Eine andere Lösung wäre, ng-animate-swap insgesamt zu überspringen und nur das Vorlagenelement mit regulären alten CSS-Übergängen zu animieren, obwohl dies davon abhängt, was Sie tun und wie Sie es aussehen sollen.