升级至iPhone 14.6版本后AngularJS select组件无法正常运行

根因说明 #

iOS 14.6 调整了原生表单控件的事件触发优先级，<select> 下拉框的 change 事件脱离了 AngularJS 1.x 默认的脏值检测监听上下文。选择下拉选项后，控件实际值已经变更，但 AngularJS 没有触发脏值检测循环，导致 ng-model 绑定的变量没有同步更新，只有当页面内有其他操作触发脏检测时（比如点击其他按钮、滚动页面）才会显示最新值，所以会出现偶发正常的现象。该问题由系统层逻辑变更导致，和浏览器本身无关，所有运行在 iOS 14.6 上的浏览器均可复现。

解决方案 #

全局修复方案（推荐） #

新增全局指令统一处理所有 <select> 元素的兼容问题，无需修改原有业务代码：

// 在你的应用主模块中添加该指令
angular.module('yourApp').directive('select', () => ({
  restrict: 'E',
  link: (scope, element) => {
    // 监听原生change事件，手动触发脏值检测
    element.on('change', () => scope.$applyAsync());
  }
}));

单组件修复方案 #

如果只需要修复个别页面的select问题，可以直接在出问题的select标签上添加ng-change触发脏检测：

<select
  ng-model="yourSelectedVar"
  ng-options="item.id as item.name for item in optionList"
  ng-change="$applyAsync()"
>
  <!-- 如果用ng-repeat生成option，该写法同样生效 -->
</select>

临时兼容方案 #

如果代码改动成本较高，也可以替换原生<select>为自定义下拉组件，避开原生控件的事件兼容问题。

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