AngularJS中$mdDialog更新后重载用户数据的替代方案咨询

嘿，我来给你梳理几个不用直接调用另一个控制器函数的实现方式，都是AngularJS里常用的做法：

1. 用共享服务（Service）管理数据（最推荐） #

把用户销售数据的加载、更新逻辑都放到一个共享服务里，让需要用到数据的控制器都依赖这个服务。这样模态框更新成功后，要么直接更新服务里的本地数据（自动同步到所有引用的控制器），要么调用服务里的重载方法，完全不用跨控制器调用函数。

举个例子：

第一步：创建共享服务 #

angular.module('yourApp').service('SalesDataService', function($http) {
  // 存储用户销售数据的私有变量
  let userSales = [];

  // 加载用户销售数据的方法
  this.loadUserSales = function(userId) {
    return $http.get(`/api/users/${userId}/sales`)
      .then(res => {
        userSales = res.data;
        return userSales;
      });
  };

  // 更新单条销售数据的方法
  this.updateSale = function(saleId, updatedSale) {
    return $http.put(`/api/sales/${saleId}`, updatedSale)
      .then(res => {
        // 找到对应项并更新本地数据，避免全量重载
        const targetIndex = userSales.findIndex(sale => sale.id === saleId);
        if (targetIndex !== -1) {
          userSales[targetIndex] = res.data;
        }
        return res.data;
      });
  };

  // 获取当前销售数据的方法
  this.getUserSales = function() {
    return userSales;
  };
});

第二步：在列表控制器里使用服务 #

angular.module('yourApp').controller('SalesListCtrl', function(SalesDataService, currentUserId, $mdDialog) {
  const vm = this;
  // 直接引用服务里的数据，后续更新会自动同步
  vm.userSales = SalesDataService.getUserSales();

  // 初始化加载数据
  SalesDataService.loadUserSales(currentUserId);

  // 打开编辑模态框的方法
  vm.showEditSale = function(sale) {
    $mdDialog.show({
      templateUrl: 'edit-sale-dialog.html',
      controller: 'EditSaleDialogCtrl',
      controllerAs: 'vm',
      locals: { targetSale: sale }
    });
  };
});

第三步：在模态框控制器里调用服务更新 #

angular.module('yourApp').controller('EditSaleDialogCtrl', function($mdDialog, SalesDataService, targetSale) {
  const vm = this;
  // 深拷贝避免直接修改原数据
  vm.updatedSale = angular.copy(targetSale);

  vm.saveChanges = function() {
    SalesDataService.updateSale(targetSale.id, vm.updatedSale)
      .then(() => {
        $mdDialog.hide();
        // 不用做额外操作，服务里的数据已经更新，列表会自动刷新
      });
  };
});

这种方式不仅解耦了控制器，还能避免全量重新加载数据，性能更好，完全符合AngularJS的最佳实践。

2. 通过事件广播/监听实现跨控制器通信 #

如果你的控制器结构比较复杂（比如不是父子关系），可以用AngularJS的$emit/$broadcast来发送事件，让目标控制器监听事件并触发数据重载。

模态框控制器里发送事件 #

vm.saveChanges = function() {
  $http.put(`/api/sales/${targetSale.id}`, vm.updatedSale)
    .then(res => {
      // 向上广播到$rootScope，确保所有控制器都能监听到
      $rootScope.$emit('saleUpdated', { saleId: targetSale.id, updatedData: res.data });
      $mdDialog.hide();
    });
};

目标控制器里监听事件 #

angular.module('yourApp').controller('TargetCtrl', function($rootScope, $scope) {
  // 监听事件
  const saleUpdateListener = $rootScope.$on('saleUpdated', (event, args) => {
    // 这里触发你的数据重载函数
    loadUserSalesData();
  });

  // 记得在控制器销毁时移除监听，避免内存泄漏
  $scope.$on('$destroy', () => {
    saleUpdateListener();
  });

  // 你的数据重载函数
  function loadUserSalesData() {
    // ... 原有加载逻辑
  }
});

注意：如果是父子作用域，用$broadcast（向下发送）或者$emit（向上发送）就行，不用非要用$rootScope，但跨非父子作用域的话，$rootScope是最稳妥的选择。

3. 模态框关闭时返回更新后的数据 #

如果调用模态框的控制器本身就可以处理数据更新，那直接在$mdDialog.hide()里返回更新后的销售数据，然后在调用方更新本地数组即可，完全不用涉及其他控制器。

调用模态框的方法 #

vm.showEditSale = function(saleIndex) {
  const targetSale = vm.userSales[saleIndex];
  $mdDialog.show({
    templateUrl: 'edit-sale-dialog.html',
    controller: 'EditSaleDialogCtrl',
    controllerAs: 'vm',
    locals: { targetSale: targetSale }
  }).then(updatedSale => {
    // 直接更新本地数组的对应项
    vm.userSales[saleIndex] = updatedSale;
    // 如果必须全量重载，这里也可以调用本地的重载函数
    // loadUserSalesData();
  });
};

模态框控制器里返回数据 #

vm.saveChanges = function() {
  $http.put(`/api/sales/${targetSale.id}`, vm.updatedSale)
    .then(res => {
      // 返回更新后的数据给调用方
      $mdDialog.hide(res.data);
    });
};

这种方式最简单直接，适合调用方本身有权限/能力处理数据更新的场景。

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