javascript - 在 AngularJS 1.6 中交流兄弟组件之间的变化

Question

我有一个 AngularJS 1.6 应用程序，看起来像这样:

angular.module('app').component('parent', {
    template: '    
      <parent>
         <display options="ctl.options"></display>
         <controls options="ctl.options"></controls>
      </parent>',
    controller: function() {
      this.options = { x: 100, y: 0.2 };
    },
    controllerAs: 'ctl',
    bindToController: true
});

我想使用 controls 组件中的输入来修改 options 对象的属性，以便更改反射(reflect)在 display 中(但无需在每次更改一个属性时重写整个对象)。

我该怎么做？即使我在 controls 中将选项设置为双向绑定(bind)，display 也不会更新并且 $onChanges 不会触发。

可以使用 $watch 或 messages 轻松完成，但我想不出一个合适的以组件为中心的方法来完成它。

Answer 1

一种声明式的方法是让工厂存储数据，并将工厂传递给每个 Controller 。当任一 Controller /组件更新状态时，它会反射(reflect)在另一个 Controller /组件中。

var app = angular.module('app', []);

app.factory('Options', function(){
  return {
    data: {
      x: 100,
      y: 0.2
    }
  };
});

app.controller('DisplayCtrl', function($scope, Options){
  $scope.options = Options.data;
});

app.controller('ControlsCtrl', function($scope, Options){
   $scope.options = Options.data;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="DisplayCtrl">
    <p>x: {{ options.x }}</p>
    <p>y: {{ options.y }}</p>
  </div>
  <div ng-controller="ControlsCtrl">
     <label>
        x: <input type="number" ng-model="options.x">
     </label>
     <label>
        y: <input type="number" ng-model="options.y">
     </label>
  </div>
</div>

参见 Share data between AngularJS controllers更多的想法。我想https://stackoverflow.com/a/25145593/1927876是最佳答案，因为它是如此明确且易于推理，这也是我在此做出回答的基础。