Entkopplung von UI und Controllern in einer verschachtelten benutzerdefinierten Anweisung

Question

Was ich denke, ich möchte jeden Schritt eines Assistenten vollständig in eine benutzerdefinierte Elementrichtlinie isolieren.

Ich denke, dies würde mir erlauben, das Detail jeder Seite des Assistenten vollständig zu kapseln. Zum Beispiel:

<custom-wizard-tag> 
    <enter-name-page page="1" name-placeholder="name"/> 
    <enter-address-page page="2" name-placeholder="name" address-placeholder="address" last-page/> 
</custom-wizard-tag> 

So weit, so gut. Jedes der obigen Elemente hat seine eigene Direktive, und jede davon spezifiziert eine templateUrl und einen Controller (templateUrl könnte natürlich als Attribut angegeben werden).

Ich möchte jede Seite des Assistenten ein Verhalten "erben". Die UI-Komponenten würden die Schaltflächen enthalten, die den äußeren Gültigkeitsbereich abfragen müssten, um zum Beispiel zu bestimmen, ob es möglich ist, vorwärts, rückwärts usw. zu gehen. Außerdem müssten wir Member-Funktionen im übergeordneten Bereich aufrufen, um den Assistenten tatsächlich vor- und zurückzubewegen und zu überprüfen, ob die aktuelle Seitenzahl mit der von uns übereinstimmt.

Ich bin neu in diesem so mit mir tragen ...

las ich in der Dokumentation zu directive, und dachte, ich scope: { onNext: '&onNext' }, um zu ‚erben‘ die onNext Funktion aus dem vorherigen Umfang nutzen könnten (was es wird davon ausgegangen, dass es sich um einen Zauberer handelt. Dies ist jedoch nicht das, was eckig zu tun scheint. Es scheint den inneren Bereich onNext über ein Attribut mit dem Namen on-next abbilden zu wollen und damit die Kapselung zu brechen, da nun die UI-Elemente auf Funktionen im übergeordneten Bereich verweisen müssen - was genau das ist, was ich vermeiden wollte.

Bin ich den falschen Baum bellen, oder gibt es eine idiomatische Art, dies zu tun. Ein Tag der Websuche hat mich nicht weit gebracht, aber ich könnte die falschen Suchbegriffe verwenden.

Vielen Dank für Ihre Geduld.

Answer 1

scope: { onNext: '&onNext' } wird jede inherintance nicht tun, würden Sie onNext in der Vorlage (die Vorlage scope) auf die gleiche Weise mit der page Eigenschaft tun definieren müssen: <enter-name-page page="1"

Wenn Sie eine Funktion onNext in definierten Sie customWizardTag Richtlinie entweder in link Funktion oder in seinem Controller, müssen Sie es in den Controller legen, weil der Controller an die Child-Direktive übergeben werden kann. Dann können Sie den Controller der übergeordneten Richtlinie in den Link-Funktionen der somethingPage-Direktiven übergeben.

.directive('parentDirective, function() { 
    return { 
     controller: someControllerThatHasOnNext, 
    } 
}) 

.directive('childDirective', function() { 
    return { 
     require: '^^parentDirective', 
     link: function(scope, element, attrs, theParentDirectivesController){ 
      theParentDirectivesController.onNext(); 
     } 
    } 
}) 

Wenn das ist, was Sie