AngularJS 1.3升级1.8后select的option选中值无法持久化问题

问题描述 #

此前使用AngularJS 1.3版本时，以下下拉框代码运行正常，但升级至1.8.2版本后功能不符合预期：

<select class="form-control" ng-model="formElement.params.customProperties['' + tabProperty.id]">
  <option style="color : #2C2C2C" value="">Default</option>
  <option style="color : #3D5DFF" value="attention-neutral-1-500">Blue</option>
  <option style="color : #A35C00" value="attention-warning-500">Brown</option>
  <option style="color : #707070" value="attention-neutral-2-500">Gray</option>
  <option style="color : #008060" value="attention-positive-500">Green</option>
  <option style="color : #9C41DD" value="attention-system-500">Purple</option>
  <option style="color : #DC0C22" value="attention-negative-500">Red</option>
</select>

该下拉框位于弹窗内，弹窗配有关闭按钮，版本差异下的表现：

• AngularJS 1.3：选择下拉框值后点击关闭按钮，再次打开弹窗时选中值会保留；
• AngularJS 1.8.2：选择下拉框值后点击关闭按钮，再次打开弹窗时选中值未被保留；
• 控制器代码未做任何修改。

核心原因分析 #

AngularJS从1.3到1.8的版本迭代中，对ngModel绑定的严格性、对象属性初始化要求以及DOM销毁重建时的绑定恢复逻辑做了调整，主要影响点包括：

1. 未初始化属性的绑定处理：1.3版本会隐式创建未定义的对象属性用于绑定，但1.8版本要求绑定的属性必须提前显式初始化，否则弹窗重建时绑定的属性不存在，导致选中值丢失；
2. 弹窗DOM的销毁与重建：如果弹窗通过ng-if控制显示（会销毁DOM和对应的作用域绑定），1.8版本不会自动恢复临时创建的绑定属性值，而1.3版本的脏值检查机制更宽松，能够保留这类值；
3. 临时对象的生命周期：如果formElement.params.customProperties是弹窗打开时才创建的临时对象，关闭弹窗时对象被销毁，1.8版本不会保留其属性值，而1.3版本可能因作用域继承特性保留。

解决方案 #

1. 提前初始化绑定属性 #

在控制器中，弹窗初始化或打开前，确保formElement.params.customProperties对象存在，并且对应tabProperty.id的属性已初始化（初始值可设为空字符串）：

// 根据实际业务逻辑调整
if (!formElement.params.customProperties) {
  formElement.params.customProperties = {};
}
const propKey = '' + tabProperty.id;
// 确保属性已定义，避免AngularJS 1.8无法绑定
if (typeof formElement.params.customProperties[propKey] === 'undefined') {
  formElement.params.customProperties[propKey] = '';
}

2. 调整弹窗的DOM控制逻辑 #

如果弹窗使用ng-if控制显示（会销毁DOM），替换为ng-show（仅隐藏DOM，保留作用域和绑定关系）；或者确保弹窗关闭时，绑定的数据源formElement.params.customProperties不会被重置或销毁。

3. 改用ng-options优化绑定（可选） #

使用ng-options替代静态<option>标签，更符合AngularJS的绑定规范，减少版本差异带来的兼容性问题：

<select class="form-control" ng-model="formElement.params.customProperties[tabPropertyId]">
  <option value="">Default</option>
  <option ng-repeat="opt in colorOptions" style="color: {{opt.color}}" value="{{opt.value}}">{{opt.label}}</option>
</select>

控制器中定义颜色选项集合：

$scope.tabPropertyId = '' + tabProperty.id;
$scope.colorOptions = [
  { label: 'Blue', value: 'attention-neutral-1-500', color: '#3D5DFF' },
  { label: 'Brown', value: 'attention-warning-500', color: '#A35C00' },
  { label: 'Gray', value: 'attention-neutral-2-500', color: '#707070' },
  { label: 'Green', value: 'attention-positive-500', color: '#008060' },
  { label: 'Purple', value: 'attention-system-500', color: '#9C41DD' },
  { label: 'Red', value: 'attention-negative-500', color: '#DC0C22' }
];

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