无法通过jQuery为Angular表单字段设置值的问题求助

我明白你遇到的麻烦——直接用原生JS修改input的值后，AngularJS的模型没跟着更新，这是因为AngularJS有自己的数据绑定机制，直接操作DOM不会自动触发模型同步，再加上你的ng-model-options指定了updateOn: 'blur'，触发的事件也不对。

下面给你两种解决方案，根据你的使用场景选择：

1. 优先在AngularJS上下文内操作（推荐） #

如果你的代码是在AngularJS的控制器、指令或者服务里，不要直接操作DOM，直接修改绑定的模型值是最规范的方式：

// 在控制器里直接更新$scope上的模型
$scope.testName = "some value";
// 如果是用控制器As语法，比如vm.testName，就直接修改vm.testName

这种方式会自动触发AngularJS的脏检查，视图和模型会自动同步，完全不需要手动触发事件。

2. 必须用原生JS操作DOM的情况（比如外部脚本、自动化测试） #

如果没办法在AngularJS上下文里操作，你需要做两件事：

• 触发blur事件（因为你的ng-model-options设置了只有在失去焦点时才更新模型）
• 手动触发AngularJS的脏检查循环，让它同步模型和视图

原生JS实现： #

const inputElement = document.getElementById("testId");
// 设置DOM值
inputElement.value = "some value";
// 触发blur事件，匹配ng-model-options的updateOn配置
inputElement.dispatchEvent(new Event('blur'));
// 获取该元素对应的AngularJS作用域，触发脏检查
const scope = angular.element(inputElement).scope();
scope.$apply();

jQuery实现： #

$("#testId").val("some value").trigger("blur");
// 触发AngularJS的脏检查
angular.element("#testId").scope().$apply();

为什么你的原方法无效？ #

你之前触发的是input事件，但你的ng-model-options明确指定了updateOn: 'blur'，所以AngularJS只会在blur事件发生时才同步模型。另外，即使触发了正确的事件，有时候AngularJS不会自动启动脏检查，需要手动调用$apply()来通知它更新绑定。

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