Kommunikation zwischen verschachtelten Controllern

Question

Ich bin neu in eckigen, suchte nach einer guten Lösung für die unten, aber konnte keine gute Option finden.
Ich habe einen extrem modalen Dialog von ModalDialogCtrl, der ein bearbeitetes Objekt wie Hase oder Hund oder Katze oder irgendetwas anderes enthält. Ich möchte die gleiche Funktionalität für jedes Objekt, das Speichern ermöglicht, wenn der Benutzer die Schaltfläche "Speichern" drückt. Das Viewmodell von Dialog verfügt über eine verschachtelte Ansicht für das zu bearbeitende Objekt, dessen Vorlagenname je nach Typ des bearbeiteten Objekts ersetzt wird. Diese spezifische Sicht enthält einen objektspezifischen Controller.

Modal Controller:

function ModalDialogCtrl($scope) { 
    // $scope.objectSpecificViewModelTemplate = "rabbit.html"; 
    // or 
    // $scope.objectSpecificViewModelTemplate = "dog.html"; 
    // etc 
    ctrl.save = function() { 
     // need to call inner object controller's save() method here 
    }; 

    ctrl.cancel = function() { 
     // cancel editing 
    }; 
}; 

modales Dialogansicht:

<div class="modal-header"> 
    <!-- Modal header --> 
</div> 
<div class="modal-body" id="modal-body"> 
    <!-- Modal body containing object-specific view model --> 
    <div ng-include src="objectSpecificViewModelTemplate"></div> 
</div> 
<div class="modal-footer"> 
    <!-- Modal buttons --> 
    <button class="btn btn-primary" type="button">OK</button> 
    <button class="btn btn-warning" type="button">Cancel</button> 
</div> 

Objektspezifische Ansicht Vorlagen:

<div ng-controller="RabbitCtrl"> 
    <p>Weight: <input type="text" ng-model="rabbit.weight" /></p> 
</div> 

oder

<div ng-controller="DogCtrl"> 
    <p>Color: <input type="text" ng-model="dog.color" /></p> 
</div> 

Objektspezifische Steuerungen:

function RabbitCtrl($scope) { 
    $scope.rabbit = { weight: 5} 
    $scope.save = function() { /* save to server */ }; 
} 
function DogCtrl($scope) { 
    $scope.dog = { dog: "black"} 
    $scope.save = function() { /* save to server */ }; 
} 

Was ich brauche, ist die innere Objekt save() Methode aufrufen, wenn der Benutzer Speichern Taste drückt. Und ich möchte, dass die modalen Controller und objektspezifischen Controller entkoppelt werden, da ich sie möglicherweise an verschiedenen Stellen der Anwendung wiederverwenden möchte. Also denke ich, dass meine Frage allgemein aussieht: wie man den Eltern-Controller veranlasst, bestimmte verschachtelte Controller-Methoden aufzurufen (es kann viele verschachtelte Controller geben) oder wie man den internen Controller dazu bringt, die Controller-Methode bestimmter Eltern aufzurufen?

Answer 1

Ich sehe auch Möglichkeiten hier:

1. Verwenden Veranstaltungen.

2. Verwendung erforderlich. In Kind-Controller benötigen Sie Eltern und rufen d.h .:

parentCtrl.register(childCtrl)

Jetzt in parentCtrl Sie Link zu Kind speichern:

vm.register = function(child) { 
    vm.containedComponent = child; 
} 

und jede Methode davon aufrufen können. (Dh onSave)

(Dies ist nicht so schlimm, wenn Sie sicher, dass Ihre Eltern immer genau ein Kind, aber wenn das Kind kann mit ng-wenn ändern Sie es manuell deregistrieren brauchen wird)