时间戳

首页 > 解决方案 > 在 AngularJS 1.6 中的兄弟组件之间交流更改

javascript - 在 AngularJS 1.6 中的兄弟组件之间交流更改

问题描述

我有一个 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对象的属性，以便反映更改display（但每次更改一个属性时都不会重写整个对象）。

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

它可以通过 $watch 或消息轻松完成，但我无法找到一种适当的以组件为中心的方式来完成它。

标签： javascriptangularjsangularjs-componentsangularjs-1.6

解决方案

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

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>

有关更多想法，请参阅在 AngularJS 控制器之间共享数据。我认为https://stackoverflow.com/a/25145593/1927876是最好的答案，因为它是如此声明性且易于推理，这也是我在这里回答的基础。

推荐阅读