我如何使用一项服务来更新AngularJ中的父母和子女范围

Question

我正在尝试在我的代码中更多地实现服务，并且想同时使用一个更新ParentCtrl和ChildCtrl中数据的服务。

我读到服务是单例，不服用$scope。我还读到，在从ChildCtrl更新ParentCtrl时，该操作是从子女内而不是相反的（即，父母都无法访问孩子的范围，但是孩子的范围可以修改父范围中包含的属性）。

我尝试使用 $parent并瞄准父母没有成功的对象。

我的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>

我的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;
    }
  }
})

我怀疑问题之一是当Angular使用它来修改父时，儿童控制器的vm.data是空的，但是我无法弄清楚如何让子控制器在填充vm.data后更新父。

如何使用一项服务更新父范围？

供参考，请参阅此小提琴。

Answer 1

儿童控制器可以与父母进行交流，但反过来却至少不是直接的。当您试图管理组件之间的通信时，有很多陷阱要注意。这是一篇非常好的文章，可以结帐基础知识https://rclayton.silvrback.com/parent-child-controller-communication。要查看的另一个不错的资源是有关广播的信息。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>

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;
      }
    }
  })

为我工作。希望这会照亮一些。