如何通过修改DOM元素值更新Angular的ng-model并触发$watch监测

为什么直接修改DOM值不会触发$watch？ #

Angular的ng-model双向绑定依赖表单控件的input/change事件来同步视图到模型。直接修改DOM的value属性只是改动了视图层的内容，没有触发Angular监听的事件，所以模型不会更新，$watch自然监测不到变化。

解决方案1：触发控件的同步事件（推荐） #

不要直接修改DOM原生的value，改用Angular的element方法设置值后，手动触发input事件让Angular同步模型：

var fileInput = angular.element('#fileID_80');
fileInput.val(1);
fileInput.triggerHandler('input'); // 触发input事件，通知Angular更新模型

解决方案2：直接更新$scope模型（更规范的Angular写法） #

如果能直接访问到控制器的$scope，直接修改模型值是最符合Angular设计的方式，不需要操作DOM：

// 在控制器上下文内直接修改
$scope.tracker.fileID_80 = 1;

// 如果是在Angular外部的JS代码中修改，需要手动触发脏检查
$scope.$apply(function() {
  $scope.tracker.fileID_80 = 1;
});

这种方式会直接触发$watch，且不需要依赖DOM元素的ID，更易维护。

额外说明 #

如果你的场景必须通过DOM操作来触发（比如和非Angular的第三方代码交互），优先用方案1；如果是Angular内部逻辑，方案2是更优选择，避免不必要的DOM操作。

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