使用jQuery设置输入框值未同步到AngularJS模型的问题

这是AngularJS和jQuery混用时非常典型的问题——你直接用jQuery修改了输入框的DOM值，但AngularJS的双向绑定依赖自身的脏检查机制，它根本没察觉到DOM发生了变化，所以$scope.name自然不会同步更新。

下面给你几个实用的解决方案：

方法1：触发输入框的原生事件，让Angular感知变化 #

直接修改DOM后，手动触发input事件（模拟用户输入的行为），Angular的ng-model指令会监听这个事件并自动同步模型：

$('#nameId').val('angular').trigger('input');

如果是老版本的Angular或者某些特殊场景，trigger('change')也能生效，但input事件更贴合实时输入的场景。

方法2：通过Angular的Scope手动更新模型（更符合Angular思想） #

与其修改DOM再同步模型，不如直接操作Angular的$scope，这才是Angular推荐的方式。你可以先通过DOM元素获取对应的Scope，然后用$apply()触发脏检查：

// 获取输入框对应的Angular Scope
var inputScope = angular.element('#nameId').scope();
// 在$apply回调里修改模型，确保脏检查执行
inputScope.$apply(function() {
  inputScope.name = 'angular';
});

这样做的好处是，模型和视图会双向同步，完全符合Angular的设计逻辑，避免DOM和模型不一致的问题。

注意事项 #

• 尽量避免在Angular应用里直接操作DOM，Angular的核心思想是数据驱动视图，操作模型才是正确的姿势。
• 如果必须使用jQuery，记得一定要让Angular知晓DOM的变化，要么触发事件，要么手动执行脏检查（$apply/$digest），不然就会出现视图和模型不同步的情况。

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