AngularJS不使用$scope与ModalController(resolve)实现UI Modal的技术问询

没问题！我完全get到你的需求——不想碰$scope、不想额外写ModalController、就想复用自己用vm = this写的现有控制器来搞定UI模态框。咱们直接上可行的方案：

核心思路是让模态框直接使用当前控制器的vm实例，不用额外创建控制器，也不需要resolve传递数据。

1. 主控制器代码（保持你的vm = this风格） #

angular.module('yourAppModule').controller('YourMainController', function($uibModal) {
  var vm = this;

  // 你要在模态框里用的变量和方法
  vm.modalTitle = "自定义模态框标题";
  vm.modalContent = "这是模态框的内容，可以直接从主控制器里调用";
  vm.handleModalConfirm = function() {
    console.log("模态框确认按钮被点击");
    // 这里可以处理确认逻辑
  };

  // 打开模态框的方法
  vm.openModal = function() {
    var modalInstance = $uibModal.open({
      templateUrl: 'modaltemplate.html',
      // 关键：直接把当前控制器的vm作为模态框的控制器实例
      controller: function() {
        return vm;
      },
      // 指定控制器别名，和你平时用的vm保持一致
      controllerAs: 'vm',
      // 如果需要禁用背景点击关闭，可以加这个选项
      backdrop: 'static'
    });

    // 模态框关闭/取消的回调
    modalInstance.result.then(
      function(confirmData) {
        // 确认关闭时的逻辑，confirmData是$close传递的值
        console.log("模态框确认关闭，返回数据：", confirmData);
      },
      function() {
        // 取消关闭时的逻辑
        console.log("模态框被取消关闭");
      }
    );
  };
});

2. 模态框模板（用vm绑定数据和方法） #

<script type="text/ng-template" id="modaltemplate.html">
  <div class="modal-header">
    <h3 class="modal-title">{{vm.modalTitle}}</h3>
  </div>
  <div class="modal-body">
    <p>{{vm.modalContent}}</p>
    <!-- 直接调用主控制器里的方法 -->
    <button class="btn btn-secondary" ng-click="vm.handleModalConfirm()">测试主控制器方法</button>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="$close('用户确认了')">确认</button>
    <button class="btn btn-default" ng-click="$dismiss('用户取消了')">取消</button>
  </div>
</script>

3. 为什么这个方案适合你？ #

• 完全不用$scope：全程保持你熟悉的vm = this风格，模态框模板里直接用vm.xxx访问数据和方法。
• 不用额外创建ModalController：模态框直接复用现有主控制器的vm实例，省掉了额外的控制器代码。
• 不用resolve：数据和方法直接通过vm共享，不需要通过resolve传递，代码更简洁。

如果需要模态框和主控制器的数据隔离（比如不想修改主控制器的原始数据），可以在打开模态框时复制一份vm的数据，比如：

controller: function() {
  var modalVm = angular.copy(vm);
  // 可以给modalVm加模态框独有的方法
  modalVm.modalOnlyMethod = function() {
    console.log("这是模态框独有的方法");
  };
  return modalVm;
}

这样既保持了你的编码习惯，又完美实现了模态框的需求～

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