Aktualisieren Sie die übergeordnete Bereichsvariable in AngularJS

Ich habe zwei Controller, einen in einen anderen gewickelt. Jetzt weiß ich, dass der untergeordnete Bereich Eigenschaften vom übergeordneten Bereich erbt. Gibt es jedoch eine Möglichkeit, die übergeordnete Bereichsvariable zu aktualisieren? Bisher habe ich keine offensichtlichen Lösungen gefunden.

In meiner Situation habe ich einen Kalender-Controller in einem Formular. Ich möchte die Start- und Enddaten aus dem übergeordneten Bereich (dem Formular) so aktualisieren, dass das Formular beim Senden die Start- und Enddaten enthält.

Sie müssen ein Objekt (kein Grundelement) im übergeordneten Bereich verwenden, und dann können Sie es direkt aus dem untergeordneten Bereich aktualisieren

Elternteil:

app.controller('ctrlParent',function($scope){
    $scope.parentprimitive = "someprimitive";
    $scope.parentobj = {};
    $scope.parentobj.parentproperty = "someproperty";
});

Kind:

app.controller('ctrlChild',function($scope){
    $scope.parentprimitive = "this will NOT modify the parent"; //new child scope variable
    $scope.parentobj.parentproperty = "this WILL modify the parent";
});

Arbeitsdemo : http://jsfiddle.net/sh0ber/xxNxj/

Siehe Was sind die Nuancen der prototypischen / prototypischen Vererbung von Scope in AngularJS?

Es gibt noch eine Möglichkeit, diese Aufgabe auszuführen und die $scope.$parentVariable nicht zu verwenden .

Bereiten Sie einfach eine Methode zum Ändern des Werts im übergeordneten Bereich vor und verwenden Sie sie im untergeordneten Bereich. So was:

app.controller('ctrlParent',function($scope) {
  $scope.simpleValue = 'x';
  $scope.changeSimpleValue = function(newVal) {
    $scope.simpleValue = newVal;
  };
});

app.controller('ctrlChild',function($scope){
    $scope.changeSimpleValue('y');
});

Es funktioniert auch und gibt Ihnen mehr Kontrolle über die Wertänderungen.

Sie können die Methode dann auch in HTML wie folgt aufrufen : <a ng-click="changeSimpleValue('y')" href="#">click me!</a>.

Dies funktioniert auch (aber nicht sicher, ob dies der Best Practice entspricht oder nicht)

app.controller('ctrlParent',function($scope) {
    $scope.simpleValue = 'x';
});

app.controller('ctrlChild',function($scope){
    $scope.$parent.simpleValue = 'y';
});

Wenn Sie einem Bereich ein primitives Attribut zuweisen, ist es immer lokal für den Bereich (möglicherweise im laufenden Betrieb erstellt), auch wenn ein übergeordneter Bereich ein Attribut mit demselben Namen hat. Dies ist eine Designentscheidung und meiner Meinung nach eine gute.

Wenn Sie in der Ansicht ein Grundelement (Ints, Boolesche Werte, Zeichenfolgen) im übergeordneten Bereich ändern müssen, muss es ein Attribut eines anderen Objekts in diesem Bereich sein, damit die Zuweisung möglicherweise lautet:

<a ng-click="viewData.myAttr = 4">Click me!</a>

und es wird wiederum:

1. Holen Sie sich das viewDataObjekt aus dem Bereich, in dem es definiert ist
2. Weisen Sie seinem myAttrAttribut 4 zu .

Für den Zugriff auf im übergeordneten Element deklarierte Variablen sollten wir $ parent im untergeordneten Controller oder in der Vorlagendatei verwenden

In der Steuerung

$scope.$parent.varaiable_name

In HTML-Vorlage

ng-model="$parent.varaiable_name"