Wie kann ich einen Dienst verwenden, um sowohl den übergeordneten als auch den untergeordneten Bereich in AngularJS zu aktualisieren?

Question

Ich versuche, Dienste mehr in meinem Code zu implementieren, und möchte nur einen Dienst verwenden, der Daten in ParentCtrl und ChildCtrl zur gleichen Zeit aktualisiert.

Ich habe gelesen, dass Dienste sind Singletons und nehmen Sie nicht $scope. Ich habe auch gelesen, dass beim Aktualisieren der ParentCtrl von ChildCtrl die Aktion von innerhalb des untergeordneten und nicht anders herum initiiert wird (dh der übergeordnete hat keinen Zugriff auf den Bereich des untergeordneten, aber der Bereich des Kindes kann Eigenschaften im übergeordneten Bereich ändern).

Ich habe versucht, $parent sowie Targeting eines Objekts im Eltern ohne Erfolg.

Mein HTML:

<div ng-app="myApp"> 
    <div ng-controller="ParentCtrl"> 
    <!--Parent Scope: {{data}} option 1: doesn't work--> 
    Parent Scope: {{data.key}} <!-- option 2: doesn't work --> 
    <div ng-controller="ChildCtrl as vm"> 
     Child Scope: {{vm.data}} 
     <button ng-click="vm.update(vm.child)">Click Me</button> 
    </div> 
    </div> 
</div> 

Mein JS:

angular.module('myApp', []); 

angular.module('myApp') 
.controller('ParentCtrl', function($scope) { 
    //$scope.data = ''; 
    $scope.data = { key: '' }; 
}) 

angular.module('myApp') 
.controller('ChildCtrl', function($scope, myService) { 
    vm = this; 
    vm.child = "Henry, Jr." 
    vm.update = myService.alertFn; 
    //$scope.$parent.data = vm.update; // option 1: doesn't work 
    $scope.data.key = vm.update; // option 2: doesn't work 
}) 

angular.module('myApp') 
.service('myService', function() { 
    return { 
    alertFn: function(data) { 
     vm.data = data; 
    } 
    } 
}) 

Ich vermute, dass eines der Probleme, dass das Kind Controllers ist vm.data leer ist, wenn Angular verwendet es die Eltern zu ändern, aber ich kann nicht finde heraus, wie man den Kind-Controller dazu bringt, das Elternteil zu aktualisieren, nachdem vm.data aufgefüllt ist.

Wie kann ich einen Dienst verwenden, um sowohl den übergeordneten als auch den untergeordneten Bereich zu aktualisieren?

Als Referenz siehe fiddle.

Answer 1

Kindercontroller können mit ihren Eltern kommunizieren, aber nicht umgekehrt, zumindest nicht direkt. Wenn Sie versuchen, die Kommunikation zwischen Komponenten zu verwalten, müssen Sie viele Fallstricke beachten. Dies ist ein sehr guter Artikel, um die Grundlagen zu überprüfen https://rclayton.silvrback.com/parent-child-controller-communication. Eine weitere gute Informationsquelle sind Informationen zum Thema Rundfunk. https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

<div ng-app="myApp"> 
    <div ng-controller="ParentCtrl"> 
     Parent Scope: {{data}} 
     <div ng-controller="ChildCtrl as vm"> 
     Child Scope: {{vm.data}} 
     <button ng-click="vm.update(vm.child)">Click Me</button> 
     </div> 
    </div> 
    </div> 

Die JS

angular.module('myApp', []); 

    angular.module('myApp') 
    .controller('ParentCtrl', function($scope) { 
     $scope.data = ''; 
    }) 

    angular.module('myApp') 
    .controller('ChildCtrl', function($scope, myService) { 
    vm = this; 
    vm.child = "Henry, Jr." 
    vm.update = (data) => { 
     myService.alertFn(data); 
     //Here you have access to `$parent` you can use the results from 
     //the service call too if you want. 
     $scope.$parent.data = data; 
    }; 
    }) 

    angular.module('myApp') 
    .service('myService', function() { 
     return { 
     alertFn: function(data) { 
      vm.data = data; 
     } 
    } 
    }) 

Arbeiten für mich. Hoffentlich leuchtet das etwas Licht.