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

Wenn Ihr HTML wie unten aussieht, können Sie etwas Ähnliches tun:

Dann können Sie auf den Elternbereich wie folgt zugreifen

function ParentCtrl($scope) {
    $scope.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentcities = $scope.$parent.cities;
}

Wenn Sie auf einen Elterncontroller von Ihrer Ansicht aus zugreifen möchten, müssen Sie so etwas tun:

   {{$parent.property}}

Sehen Sie jsFiddle: http://jsfiddle.net/2r728/

Update

Eigentlich, da Sie cities im Elterncontroller definiert haben, wird Ihr Kindcontroller alle Scope-Variablen erben. Theoretisch brauchen Sie also nicht $parent aufrufen. Das obige Beispiel kann auch wie folgt geschrieben werden:

function ParentCtrl($scope) {
    $scope.cities = ["NY","Amsterdam","Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentCities = $scope.cities;
}

Die AngularJS-Dokumentation verwendet diesen Ansatz, hier können Sie mehr über den $scope lesen.

Noch ein Update

Ich denke, das ist eine bessere Antwort für den ursprünglichen Poster.

HTML

        {{cc.parentCities | json}}
        {{pc.cities | json}}

JS

function ParentCtrl() {
    var vm = this;
    vm.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl() {
    var vm = this;
    ParentCtrl.apply(vm, arguments); // Elternsteuerung vererben

    vm.parentCities = vm.cities;
}

Wenn Sie die Methode controller as verwenden, können Sie auch auf den Elternbereich wie folgt zugreifen

function ChildCtrl($scope) {
    var vm = this;
    vm.parentCities = $scope.pc.cities; // beachten Sie, dass pc auf den "ParentCtrl as pc" verweist
}

Wie Sie sehen können, gibt es viele verschiedene Möglichkeiten, auf $scopes zuzugreifen.

Aktualisiertes Fiddle

function ParentCtrl() {
    var vm = this;
    vm.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl($scope) {
    var vm = this;
    ParentCtrl.apply(vm, arguments);

    vm.parentCitiesByScope = $scope.pc.cities;
    vm.parentCities = vm.cities;
}

    {{cc.parentCities | json}}
    {{cc.parentCitiesByScope | json }}
    {{pc.cities | json}}

Answer 2

Ich habe gerade überprüft

$scope.$parent.someProperty

funktioniert für mich.

und es wird sein

{{$parent.someProperty}}

für die Ansicht.

Answer 3

Wenn Sie die as-Syntax verwenden, z. B. ParentController as parentCtrl, um einen Controller zu definieren, dann verwenden Sie folgendes, um auf eine Elternscope-Variable im Kind-Controller zuzugreifen:

var id = $scope.parentCtrl.id;

Wo parentCtrl der Name des Eltern-Controllers ist, der die as-Syntax verwendet, und id eine Variable ist, die im selben Controller definiert ist.

Answer 4

Manchmal müssen Sie möglicherweise Eltern-Eigenschaften direkt im Kindbereich aktualisieren. z. B. müssen Sie ein Datum und eine Uhrzeit eines Elternelements nach Änderungen durch ein untergeordnetes Steuerelement speichern. z. B. Code in JSFiddle

HTML

JS

function Parent($scope) {
    $scope.event = {
            date: '2014/01/1',
            time: '10:01 AM'
    }
}

function Child($scope) {

}

Answer 5

Sie können auch den Bereichsvererbung umgehen und Dinge im "globalen" Bereich speichern.

Wenn Sie einen Hauptcontroller in Ihrer Anwendung haben, der alle anderen Controller umschließt, können Sie einen "Hook" im globalen Bereich installieren:

function RootCtrl($scope) {
    $scope.root = $scope;
}

Dann können Sie in jedem Untercontroller auf den "globalen" Bereich mit $scope.root zugreifen. Alles, was Sie hier setzen, ist global sichtbar.

Beispiel:

function RootCtrl($scope) {
  $scope.root = $scope;
}

function ChildCtrl($scope) {
  $scope.setValue = function() {
    $scope.root.someGlobalVar = 'someVal';
  }
}

function OtherChildCtrl($scope) {
}

    Set someGlobalVar

    someGlobalVar value: {{someGlobalVar}}