ng-bootbox问题：同一视图（同一控制器）下多自定义模态框模板覆盖

这个问题我之前帮朋友排查过，本质是因为你复用了同一个配置对象，或者没有为每个模态框创建独立的配置实例，导致后面的配置会覆盖前面的模板路径。咱们一步步来解决：

核心原因分析 #

当你在控制器里定义多个模态框时，如果共用同一个配置对象（比如先定义一个modalConfig，然后修改它的templateUrl再调用ngBootbox.custom()），由于JavaScript对象是引用类型，两个模态框的配置指向的是同一个内存地址。最后一次修改的模板路径会覆盖之前的，所以点击所有按钮都会打开最后定义的那个模板。

解决方案 #

1. 为每个模态框创建独立的配置对象 #

不要复用同一个配置对象，而是为每个模态框单独定义完整的配置：

angular.module('yourApp').controller('YourController', function($scope, ngBootbox) {
  // 编辑工单模态框
  $scope.openEditModal = function() {
    ngBootbox.custom({
      templateUrl: './templates/modal/edit-ticket.html',
      controller: 'EditTicketModalCtrl',
      size: 'md',
      backdrop: true
    });
  };

  // 添加工单模态框
  $scope.openAddModal = function() {
    ngBootbox.custom({
      templateUrl: './templates/modal/add-ticket.html',
      controller: 'AddTicketModalCtrl',
      size: 'md',
      backdrop: true
    });
  };
});

2. 复用基础配置时使用对象克隆 #

如果多个模态框有相同的基础配置（比如大小、背景设置），可以用angular.copy()克隆基础配置，再修改专属属性，既保证复用又避免覆盖：

angular.module('yourApp').controller('YourController', function($scope, ngBootbox) {
  // 基础公共配置
  const baseModalConfig = {
    size: 'md',
    backdrop: true,
    animate: true
  };

  // 编辑工单模态框
  $scope.openEditModal = function() {
    const editConfig = angular.copy(baseModalConfig);
    editConfig.templateUrl = './templates/modal/edit-ticket.html';
    editConfig.controller = 'EditTicketModalCtrl';
    ngBootbox.custom(editConfig);
  };

  // 添加工单模态框
  $scope.openAddModal = function() {
    const addConfig = angular.copy(baseModalConfig);
    addConfig.templateUrl = './templates/modal/add-ticket.html';
    addConfig.controller = 'AddTicketModalCtrl';
    ngBootbox.custom(addConfig);
  };
});

3. 确认配置参数的正确性 #

注意！ngBootBox的custom方法中，指定模板文件路径要用templateUrl参数；如果用template参数，传入的是直接的HTML字符串，而非文件路径。如果之前写错了参数名，也可能导致异常。

额外注意事项 #

• 每个模态框的控制器尽量保持独立，避免不同模态框的业务逻辑互相干扰；
• 如果模板加载有缓存问题，可以在URL后加版本号（比如./templates/modal/edit-ticket.html?v=1）强制刷新模板。

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