AngularJS组件间数据绑定问题：表格与表单数据同步实现

嘿，我完全懂你现在的困扰——用原生DOM操作来给表单赋值确实能凑合用，但这完全没用到AngularJS最核心的数据绑定能力，咱们把代码改成符合框架规范的写法，彻底解决组件间数据传递和同步的问题。

核心思路：用组件绑定（Bindings）+ 父组件共享状态 #

AngularJS的组件间数据传递，最适合你这个场景的是以父组件为中介：表格组件（tablica）把选中的订单传递给父组件，父组件再把这个订单传给表单组件（forma）；因为订单是引用类型，表单里修改订单属性会自动同步到父组件的订单数组，表格数据自然就更新了，完全不用手动操作DOM或数组。

具体改造步骤 #

1. 重构表格组件（tablica），传递选中的订单

给tablica组件添加输出绑定，把点击Edit选中的订单传给父组件：

angular.module('app').component('tablica', {
  templateUrl: 'tablica.html',
  bindings: {
    orders: '<', // 接收父组件的订单数组
    onEdit: '&'  // 定义输出回调，传递选中的订单
  },
  controller: function() {
    const vm = this;
    
    vm.openOrder = function(order) {
      // 调用父组件的回调，把选中的订单传出去
      vm.onEdit({ order: order });
    };
  }
});

在父组件的模板里使用tablica时，绑定on-edit回调：

<tablica 
  orders="$ctrl.orders" 
  on-edit="$ctrl.handleOrderEdit(order)"
></tablica>

2. 父组件维护选中订单的状态

父组件里定义selectedOrder变量，接收表格组件传过来的订单，同时切换编辑模式：

angular.module('app').component('parentComponent', {
  templateUrl: 'parent.html',
  controller: function() {
    const vm = this;
    
    // 你的订单数据源
    vm.orders = [/* 你的订单数据 */];
    vm.selectedOrder = null;
    vm.addbtn = true; // 默认是添加模式
    
    // 接收表格组件传过来的订单
    vm.handleOrderEdit = function(order) {
      vm.selectedOrder = order;
      vm.addbtn = false; // 切换到编辑模式
    };
    
    // 保存订单的方法
    vm.saveOrder = function() {
      // 因为selectedOrder是orders数组里的元素引用，修改后数组已经自动同步了
      // 如果需要提交后端API，在这里加逻辑即可
      vm.addbtn = true; // 切换回添加模式，也可以清空selectedOrder
    };
  }
});

3. 重构表单组件（forma），用数据绑定替代DOM操作

给forma组件添加输入绑定，接收父组件的selectedOrder，同时用ng-model双向绑定表单控件：

angular.module('app').component('forma', {
  templateUrl: 'forma.html',
  bindings: {
    order: '=', // 双向绑定选中的订单
    onSave: '&' // 输出保存事件给父组件
  },
  controller: function() {
    const vm = this;
    
    vm.edit = function() {
      // 触发父组件的保存逻辑
      vm.onSave();
    };
  }
});

表单模板里直接用ng-model绑定订单属性，彻底抛弃DOM操作：

<!-- 表单控件直接绑定到order的属性 -->
<input type="text" ng-model="$ctrl.order.number" placeholder="Number">
<input type="text" ng-model="$ctrl.order.customer" placeholder="Customer">
<input type="text" ng-model="$ctrl.order.manager" placeholder="Manager">
<input type="text" ng-model="$ctrl.order.status" placeholder="Status">
<input type="text" ng-model="$ctrl.order.summ" placeholder="Price">

<button ng-click="$ctrl.edit()" ng-show="!$ctrl.addbtn">Save</button>

父组件模板里使用forma时，绑定订单和保存回调：

<forma 
  order="$ctrl.selectedOrder" 
  on-save="$ctrl.saveOrder()"
></forma>

为什么这样更靠谱？ #

• 完全遵循AngularJS的数据流：组件通过绑定传递数据，避免了原生DOM操作带来的冗余和数据不同步问题
• 订单是引用类型，表单里修改属性会自动同步到父组件的订单数组，表格数据会实时更新，不需要手动修改数组元素
• 代码更简洁、可维护，符合框架的设计思想

内容的提问来源于stack exchange，提问作者Max Gavrilov