Angular 1.5.0：父控制器如何向子组件传递异步数据？

嘿，这个需求我太熟了！在Angular 1.5里打造真正可复用的子组件，核心就是让组件只关注自身职责，把数据来源和修改逻辑完全交给父组件，用Angular的组件绑定机制实现松耦合的交互。下面给你一套具体的落地方案：

核心思路：用组件绑定实现松耦合 #

Angular 1.5的组件bindings属性是关键，我们可以通过两种绑定类型分离组件职责：

• <：单向数据绑定，负责把父组件的异步数据传递给子组件
• &：回调函数绑定，让子组件能触发父组件的修改逻辑，自身不处理业务

这样子组件完全不关心数据从哪来、修改后要做什么，只负责展示数据和触发交互，天然具备复用性。

1. 定义通用的子组件 #

子组件只保留最基础的展示和交互逻辑，所有外部依赖都通过bindings声明：

angular.module('yourApp').component('reusableItemList', {
  // 声明组件的输入输出接口
  bindings: {
    itemList: '<', // 接收父组件的异步数据
    onItemUpdate: '&' // 触发父组件的数据修改逻辑
  },
  // 组件模板：只负责渲染和触发交互
  template: `
    <div class="item-card" ng-repeat="item in $ctrl.itemList">
      <h3>{{item.title}}</h3>
      <p>{{item.content}}</p>
      <button ng-click="$ctrl.triggerUpdate(item)">编辑</button>
    </div>
  `,
  controller: function() {
    const ctrl = this;

    // 子组件只做一件事：触发父组件的回调
    ctrl.triggerUpdate = function(targetItem) {
      // 注意：回调传参要以对象形式传递，对应父组件模板里的参数名
      ctrl.onItemUpdate({ updatedItem: targetItem });
    };
  }
});

2. 父组件处理异步逻辑与数据修改 #

父组件负责所有和业务相关的操作：异步请求数据、处理数据修改的后端交互，然后通过组件绑定把数据和逻辑传递给子组件：

父组件控制器 #

angular.module('yourApp').controller('ParentController', function(ItemService) {
  const ctrl = this;

  // 1. 异步获取数据
  ItemService.fetchItems().then(response => {
    ctrl.items = response.data;
  });

  // 2. 定义数据修改的逻辑
  ctrl.handleItemUpdate = function(updatedItem) {
    // 这里可以做后端更新、本地数据同步等业务操作
    ItemService.updateItem(updatedItem).then(() => {
      // 更新本地数据后，子组件会自动同步（因为单向绑定的是引用类型）
      const targetIndex = ctrl.items.findIndex(item => item.id === updatedItem.id);
      if (targetIndex !== -1) {
        ctrl.items[targetIndex] = updatedItem;
      }
    });
  };
});

父组件模板 #

<div ng-controller="ParentController as parent">
  <!-- 直接通过绑定传递数据和回调，无需额外定向代码 -->
  <reusable-item-list
    item-list="parent.items"
    on-item-update="parent.handleItemUpdate(updatedItem)">
  </reusable-item-list>
</div>

3. 复用性验证 #

现在这个子组件可以直接在任何其他父组件里使用：
比如另一个页面的父组件，只需要自己处理异步数据获取和修改逻辑，然后给子组件传对应的itemList和onItemUpdate即可，子组件的代码完全不用改。

这种设计的好处是：

• 子组件职责单一，只做UI渲染和交互触发
• 父组件掌控业务逻辑，不用为子组件写特殊的定向代码
• 组件之间完全松耦合，复用成本极低

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