在 AngularJS 中，直接操作 DOM 元素的 value 属性不会自动同步到 ng-model 绑定的 $scope 数据，因为双向绑定依赖于 Angular 的 digest 循环。本文介绍一种可靠替代方案：使用 $interval 主动轮询 DOM 值变化，并安全触发业务逻辑。
在 angularjs 中，直接操作 dom 元素的 `value` 属性不会自动同步到 `ng-model` 绑定的 `$scope` 数据，因为双向绑定依赖于 angular 的 digest 循环。本文介绍一种可靠替代方案：使用 `$interval` 主动轮询 dom 值变化，并安全触发业务逻辑。
AngularJS 的 ng-model 与 DOM 元素之间并非简单映射，而是通过指令（如 ngModelController）建立受控的数据流：用户输入 → 指令解析 → $scope 更新 → digest 循环触发 $watch；反之亦然。手动修改原生 DOM 的 value 属性会绕过该机制，导致 $scope 值保持不变，$watch("tracker.fileID_80") 自然不会响应。
虽然可通过 $scope.$apply() 强制触发 digest，但此处 DOM 变更由外部非 Angular 代码（如第三方库、原生 JS 脚本）发起，无法保证调用时机和上下文，贸然调用 $scope.$apply() 可能抛出 Error: $digest already in progress。因此，更稳健的做法是放弃“让 DOM 驱动模型”，转为“主动监控 DOM 状态”——即用 $interval 定期读取元素值，实现轻量级响应式监听。
以下为推荐实现：
// 在控制器中
var fileInput = angular.element('#fileID_80')[0];
var watchID;
if (fileInput.value == '0') {
console.log('DOM watcher started');
var checkCount = 0;
watchID = $interval(function() {
checkCount++;
// 检测 DOM 值是否已变更（注意：value 是字符串，建议显式转换或使用 ==）
if (fileInput.value !== '0') {
console.log('DOM value changed to:', fileInput.value);
// ✅ 同步更新 scope，确保后续逻辑基于最新数据
$scope.tracker.fileID_80 = parseInt(fileInput.value, 10);
$scope.$apply(); // 确保视图和 watch 立即响应
// 执行核心业务逻辑
// ... do something ...
$interval.cancel(watchID); // 清理定时器
return;
}
// ? 添加超时保护，避免无限轮询（30秒后自动停止）
if (checkCount >= 60) {
console.warn('DOM watcher timeout after 30s');
$interval.cancel(watchID);
}
}, 500); // 每500ms检查一次
}
✅ 关键要点说明：
- 不依赖 $watch 监听模型：因模型未被主动更新，改用 $interval 直接读取 DOM；
- 主动同步 $scope：检测到 DOM 变化后，显式赋值并调用 $scope.$apply()，使 Angular 意识到数据变更；
- 防误触发与健壮性：使用 parseInt 统一数值类型，添加超时机制防止内存泄漏；
- 及时清理资源：一旦条件满足立即取消 $interval，避免持续占用性能。
⚠️ 注意事项：
- 此方案适用于低频、临时性、不可控的 DOM 注入场景（如 legacy 插件回调），不应作为常规数据流设计；
- 若可改造外部逻辑，优先改为调用 $scope 方法或触发自定义事件（如 angular.element($scope.$root).triggerHandler('external:update')），再在控制器中 $scope.$on 响应；
- AngularJS 1.5+ 中，若使用 controllerAs 语法，请将 fileID_80 改为 this.tracker.fileID_80 并注意 this 绑定。
本质上，这不是“修复 ng-model”，而是在框架边界外构建可控的桥接层——用可预测的轮询替代不可控的 DOM 干预，既满足特殊需求，又守住 AngularJS 的响应式契约。
