Angular Strap模态框关闭触发事件失效问题求助

我完全懂你现在的困扰——明明在Plunker里看到模态框关闭事件跑得好好的，自己把代码移植到项目里就没反应了。结合你给出的代码片段，我帮你梳理几个最容易踩坑的点，一步步排查：

1. 别漏了监听模态框的关闭Promise #

Angular Strap的$modal方法返回的对象自带一个Promise，模态框关闭（或取消）时会触发这个Promise的回调。很多时候移植示例时会漏掉这关键一步：

function editActivity(activityId) {
  var editModal = $modal({
    templateUrl: '/DesktopModules/Name/Angular/ViewModels/main/edit.html',
    locals: { activityId: activityId },
    controller: 'editCtrl',
    show: true // 确保模态框创建后自动显示
  });

  // 重点：监听模态框关闭/取消的回调
  editModal.$promise.then(function(result) {
    // 模态框正常关闭时执行的逻辑（比如点击保存按钮）
    console.log('模态框已关闭，返回数据:', result);
    // 这里可以加你需要触发的事件，比如刷新列表、更新数据等
  }, function(reason) {
    // 模态框被取消时的处理（比如点击背景、ESC键）
    console.log('模态框被取消，原因:', reason);
  });
}

2. 控制器内要正确调用关闭方法 #

你的editCtrl里必须通过$modalInstance来触发关闭，否则外部的Promise监听不会生效。示例如下：

angular.module('yourApp').controller('editCtrl', function($scope, activityId, $modalInstance) {
  // 模拟根据ID获取活动数据
  $scope.currentActivity = { id: activityId, name: '待编辑活动' };

  // 保存并关闭模态框
  $scope.save = function() {
    // 先执行你的保存逻辑（比如调用API）
    // saveActivity($scope.currentActivity).then(function() {
      // 关闭时传递返回数据
      $modalInstance.hide($scope.currentActivity);
    // });
  };

  // 取消关闭模态框
  $scope.cancel = function() {
    $modalInstance.dismiss('用户主动取消');
  };
});

3. 确认模块依赖已正确引入 #

这是最容易忽略的细节——你的Angular模块必须注入mgcrea.ngStrap.modal依赖，否则模态框的完整功能不会生效：

// 请确保你的主模块包含这个依赖
angular.module('yourApp', ['mgcrea.ngStrap.modal']);

4. 检查版本兼容性 #

如果你用的Angular Strap版本和Plunker示例不一致，API可能有差异。比如旧版本可能需要用onHide回调配置关闭事件：

var editModal = $modal({
  templateUrl: '/edit.html',
  controller: 'editCtrl',
  onHide: function() {
    // 关闭时直接触发的事件
    console.log('模态框已关闭');
  }
});

如果排查完这些还是没解决，建议把editCtrl的完整代码和模态框的HTML模板贴出来，这样能更精准地定位问题。

内容的提问来源于stack exchange，提问作者B.Termeer