AngularJS Zugriff auf den Elternbereich vom untergeordneten Controller

Question

Ich habe meine Controller mit data-ng-controller="xyzController as vm" eingerichtet

Ich habe ein Szenario mit überschachtelten Eltern- / Kind-Controllern. Ich habe kein Problem, auf Elterneigenschaften im verschachtelten HTML zuzugreifen, indem ich $parent.vm.property verwende, aber ich kann nicht herausfinden, wie ich auf die Elterneigenschaft von meinem Kind-Controller aus zugreifen kann.

Ich habe versucht, $scope einzufügen und dann $scope.$parent.vm.property zu verwenden, aber das funktioniert nicht?

Kann jemand Ratschläge geben?

Answer 1

Ich glaube, ich hatte kürzlich ein ähnliches Dilemma

function parentCtrl() {
   var pc = this; // pc steht für Elternkontrolle
   pc.foobar = 'SomeVal';
}

function childCtrl($scope) {

   // wie bekomme ich jetzt die Elternkontrolle 'foobar' Variable?
   // Ich habe $scope.$parent verwendet

   var parentFoobarVariableValue = $scope.$parent.pc.foobar;

   // das hat funktioniert
}

Mein Setup war etwas anders, aber das Gleiche sollte wahrscheinlich trotzdem funktionieren

Answer 2

Von einem Kindkomponenten aus können Sie mit 'require' auf die Eigenschaften und Methoden der Elternkomponente zugreifen. Hier ist ein Beispiel:

Eltern:

.component('myParent', mymodule.MyParentComponent)
...
controllerAs: 'vm',
...
var vm = this;
vm.parentProperty = 'Hallo von Eltern';

Kind:

require: {
    myParentCtrl: '^myParent'
},
controllerAs: 'vm',
...
var vm = this;
vm.myParentCtrl.parentProperty = 'Hallo von Kind';

Answer 3

Vielleicht ist das einfach, aber Sie können sie auch einfach beide auf ein externes Objekt zeigen lassen:

var cities = [];

function ParentCtrl() {
    var vm = this;
    vm.cities = cities;
    vm.cities[0] = 'Oakland';
}

function ChildCtrl($scope) {
    var vm = this;
    vm.cities = cities;
}

Der Vorteil hierbei ist, dass Änderungen in ChildCtrl jetzt auf die Daten im Eltern-Controller zurückwirken.