AngularJS - Zugriff auf den untergeordneten Bereich

Wenn ich folgende Controller habe:

function parent($scope, service) {
    $scope.a = 'foo';

    $scope.save = function() {
        service.save({
            a:  $scope.a,
            b:  $scope.b
        });
    }
}

function child($scope) {
    $scope.b = 'bar';
}

Was ist der richtige Weg zu lassen , parentlesen bvon aus child? Wenn es notwendig ist , zu definieren , bin parent, würde nicht das macht es semantisch falsch davon aus, dass beine Eigenschaft ist , die etwas im Zusammenhang mit beschrieben childund nicht parent?

Update: Wenn mehr als ein Kind darüber bnachdenken würde, würde dies zu einem Konflikt führen, für parentden bes abgerufen werden könnte. Meine Frage bleibt, was ist der richtige Weg , um den Zugang bvon parent?

Bereiche in AngularJS verwenden die prototypische Vererbung. Wenn Sie eine Eigenschaft in einem untergeordneten Bereich suchen, sucht der Interpreter die Prototypkette ausgehend vom untergeordneten Element und fährt mit den Eltern fort, bis die Eigenschaft gefunden wird, und nicht umgekehrt.

Überprüfen Sie die Kommentare von Vojta zum Problem https://groups.google.com/d/msg/angular/LDNz_TQQiNE/ygYrSvdI0A0J

Kurz gesagt: Sie können nicht über einen übergeordneten Bereich auf untergeordnete Bereiche zugreifen.

Ihre Lösungen:

1. Definieren Sie Eigenschaften in Eltern und greifen Sie von Kindern darauf zu (lesen Sie den obigen Link).
2. Verwenden Sie einen Dienst, um den Status freizugeben
3. Daten durch Ereignisse leiten. $emitSendet Ereignisse nach oben an die Eltern, bis der Stammbereich erreicht ist, und sendet Ereignisse nach $broadcastunten. Dies kann Ihnen helfen, die Dinge semantisch korrekt zu halten.

Während die Antwort von jm-s der beste Weg ist, um diesen Fall zu behandeln, ist es zum späteren Nachschlagen möglich, mit den Mitgliedern $$ childHead, $$ childTail, $$ nextSibling und $$ prevSibling auf untergeordnete Bereiche zuzugreifen. Diese sind nicht dokumentiert, sodass sie sich möglicherweise ohne vorherige Ankündigung ändern. Sie sind jedoch vorhanden, wenn Sie wirklich Bereiche durchlaufen müssen.

// get $$childHead first and then iterate that scope's $$nextSiblings
for(var cs = scope.$$childHead; cs; cs = cs.$$nextSibling) {
    // cs is child scope
}

Geige

Sie können dies versuchen:

$scope.child = {} //declare it in parent controller (scope)

Fügen Sie dann im untergeordneten Controller (Bereich) Folgendes hinzu:

var parentScope = $scope.$parent;
parentScope.child = $scope;

Jetzt hat der Elternteil Zugriff auf den Bereich des Kindes.

Eine mögliche Problemumgehung besteht darin, den untergeordneten Controller mithilfe einer Init-Funktion in den übergeordneten Controller einzufügen.

Mögliche Implementierung:

<div ng-controller="ParentController as parentCtrl">
   ...

    <div ng-controller="ChildController as childCtrl" 
         ng-init="ChildCtrl.init()">
       ...
    </div>
</div>

Wo in ChildControllerdir hast:

app.controller('ChildController',
    ['$scope', '$rootScope', function ($scope, $rootScope) {
    this.init = function() {
         $scope.parentCtrl.childCtrl = $scope.childCtrl;
         $scope.childCtrl.test = 'aaaa';
    };

}])

So, jetzt in der können ParentControllerSie verwenden:

app.controller('ParentController',
    ['$scope', '$rootScope', 'service', function ($scope, $rootScope, service) {

    this.save = function() {
        service.save({
            a:  $scope.parentCtrl.ChildCtrl.test
        });
     };

}])

Wichtig:
Um richtig zu funktionieren, müssen Sie die Direktive verwenden ng-controllerund jeden Controller umbenennen, aswie ich es im HTML getan habe, z.

Tipps:
Verwenden Sie während des Vorgangs den Chrome Plugin ng-Inspector . Es wird Ihnen helfen, den Baum zu verstehen.

Verwenden von $ emit und $ Broadcast (wie von walv in den obigen Kommentaren erwähnt)

Ein Ereignis nach oben auslösen (vom Kind zum Elternteil)

$scope.$emit('myTestEvent', 'Data to send');

Ein Ereignis nach unten auslösen (vom Elternteil zum Kind)

$scope.$broadcast('myTestEvent', {
  someProp: 'Sending you some data'
});

und schließlich zuzuhören

$scope.$on('myTestEvent', function (event, data) {
  console.log(data);
});

Für weitere Informationen: - https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Genießen :)

Ja, wir können den Variablen im übergeordneten Controller Variablen vom untergeordneten Controller zuweisen. Dies ist ein möglicher Weg:

Übersicht: Das Hauptziel des folgenden Codes besteht darin, die $ scope.variable des untergeordneten Controllers der $ scope.assign des übergeordneten Controllers zuzuweisen

Erläuterung: Es gibt zwei Controller. Beachten Sie im HTML, dass der übergeordnete Controller den untergeordneten Controller einschließt. Das heißt, der übergeordnete Controller wird vor dem untergeordneten Controller ausgeführt. Also wird zuerst setValue () definiert und dann geht das Steuerelement zum untergeordneten Controller. $ scope.variable wird als "Kind" zugewiesen. Dann wird dieser untergeordnete Bereich als Argument an die Funktion des übergeordneten Controllers übergeben, wobei $ scope.assign den Wert "child" erhält.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('myApp',[]);

    app.controller('child',function($scope){
        $scope.variable = "child";
        $scope.$parent.setValue($scope);
    });

    app.controller('parent',function($scope){
        $scope.setValue = function(childscope) {
            $scope.assign = childscope.variable;
        }
    });

</script>
<body ng-app="myApp">
 <div ng-controller="parent">
    <p>this is parent: {{assign}}</p>
    <div ng-controller="child">
        <p>this is {{variable}}</p>
    </div>
 </div>
</body>
</html>