AngularJS：模态框关闭后下拉框选中项恢复默认的问题解决

嘿，我之前也碰到过这个坑！你这个问题大概率是模态框的关闭逻辑触发了Angular的脏检查循环，或者不小心在模态框代码里重置了绑定的someProperty，导致下拉框选中状态没保留住。给你几个亲测有效的解决办法：

方法1：手动保存+恢复选中值 #

最直接的方式就是在打开模态框前，先把当前选中的下拉值存起来，等模态框彻底关闭后再赋值回去，强制保留选中状态：

$scope.openSomeDialog = function() {
  // 先把当前选中的值存到临时变量里
  const savedSelection = $scope.someProperty;
  
  // 打开模态框
  const modalInstance = $uibModal.open({
    templateUrl: '你的模态框模板路径.html',
    controller: '你的模态框控制器名'
  });

  // 监听模态框关闭的回调（不管是确认还是取消都执行）
  modalInstance.result.then(
    // 确认关闭的回调
    () => {
      $scope.someProperty = savedSelection;
    },
    // 取消/点击关闭按钮的回调
    () => {
      $scope.someProperty = savedSelection;
    }
  );
};

方法2：用ng-model-options限制模型更新时机 #

有时候Angular的ngModel会因为异步操作（比如模态框的动画、额外的digest循环）意外重置，给下拉框加上ng-model-options，让它只在下拉框的change事件触发时才更新模型：

<select ng-model="someProperty" 
        ng-change="openSomeDialog()"
        ng-model-options="{ updateOn: 'change' }">
  <option value=""></option>
  <option value="Test1">Test1</option>
  <option value="Test2">Test2</option>
</select>

这个配置能避免一些不必要的模型更新，防止下拉框被意外重置。

方法3：给模态框用独立作用域 #

如果你的模态框控制器和下拉框所在的父作用域是同一个，或者模态框用了scope: $scope，很容易不小心污染父作用域的变量。最好给模态框创建一个独立的隔离作用域，避免影响父作用域的someProperty：

$scope.openSomeDialog = function() {
  const savedSelection = $scope.someProperty;
  
  const modalInstance = $uibModal.open({
    templateUrl: '你的模态框模板路径.html',
    controller: '你的模态框控制器名',
    // 创建独立的子作用域，完全隔离父作用域
    scope: $scope.$new(true)
  });

  // 关闭后依然恢复选中值
  modalInstance.result.then(() => {
    $scope.someProperty = savedSelection;
  }, () => {
    $scope.someProperty = savedSelection;
  });
};

额外排查小提示 #

• 检查模态框的关闭逻辑里有没有调用$scope.$apply()或者$scope.$digest()，这两个方法可能会触发不必要的脏检查，导致ngModel被重置。
• 确认下拉框的option的value值和someProperty的类型一致（比如都是字符串），类型不匹配的话Angular可能无法正确识别选中状态。

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