AngularJS uibModal复用函数咨询：大项目模态框代码冗余问题

我太懂这种大型项目里模态框代码重复到头疼的感觉了！每次新增模态框都要写一遍几乎一样的uibModal.open()配置，只改几个参数，完全是冗余代码。咱们可以把这段逻辑封装成一个自定义的Angular服务，把通用配置固化，只暴露需要自定义的参数，这样调用起来就清爽多了。

第一步：封装复用的Modal服务 #

我们可以用Angular的factory来创建一个专属的模态框服务，把你提到的通用配置（比如windowClass: 'PopUp'、size: 'md'）设为默认值，然后允许传入自定义参数覆盖默认项，同时处理resolve的传递逻辑：

angular.module('yourAppName')
.factory('CustomModalService', ['$uibModal', function($uibModal) {
  // 定义模态框的默认通用配置
  const defaultConfig = {
    windowClass: 'PopUp',
    size: 'md'
  };

  return {
    open: function(customOptions) {
      // 合并默认配置与自定义参数，自定义参数优先级更高
      const modalConfig = angular.extend({}, defaultConfig, customOptions);

      // 调用uibModal.open并返回结果Promise，方便后续链式处理
      return $uibModal.open(modalConfig).result;
    }
  };
}]);

第二步：在控制器里调用复用服务 #

现在你在任何需要打开模态框的控制器里，只需要注入这个CustomModalService，然后传入差异化的参数就行，再也不用写重复的配置了：

angular.module('yourAppName')
.controller('SomeController', ['$scope', 'CustomModalService', function($scope, CustomModalService) {
  // 打开模态框的业务函数
  $scope.openTargetModal = function() {
    CustomModalService.open({
      templateUrl: current.path + 'url.html',
      controller: 'AppController',
      resolve: {
        disabled: [function () {
          return $scope.disabled;
        }]
      }
    }).then(function(result) {
      // 模态框正常关闭后的回调逻辑
      console.log('模态框返回结果:', result);
    }).catch(function(reason) {
      // 模态框被取消后的处理逻辑
      console.log('模态框已取消:', reason);
    });
  };
}]);

进阶优化：预设常用模态框类型 #

如果你的项目里有一些高频复用的模态框（比如确认弹窗、提示弹窗），还可以在这个服务里新增专门的方法，进一步简化调用：

// 在CustomModalService里新增confirm方法
confirm: function(message, confirmText = '确认', cancelText = '取消') {
  return this.open({
    templateUrl: 'path/to/confirm-modal.html',
    controller: 'ConfirmModalController',
    resolve: {
      modalData: function() {
        return {
          message: message,
          confirmText: confirmText,
          cancelText: cancelText
        };
      }
    }
  });
}

调用的时候就变得极其简洁：

CustomModalService.confirm('确定要删除这条数据吗？').then(function() {
  // 用户点击确认后的业务逻辑
}).catch(function() {
  // 用户取消后的处理逻辑
});

这样一来，整个项目里的模态框调用代码会变得非常简洁，维护起来也方便——如果要修改全局的模态框样式（比如改windowClass），只需要在defaultConfig里改一次就行，不用挨个控制器去修改。

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