javascript - 通过 javascript 填充文本框时，使用 ng-model 输入未绑定(bind)

Question

我有一个使用 javascript 填充的文本框，该文本框通过读取 QR 码并设置值来获取数据。我正在使用 ng-model 绑定(bind)到 Controller 中的一个变量，当我手动在文本框中键入内容时，该变量工作正常，但在使用 javascript 填充时则不然。我猜测有一些事件我必须手动触发才能触发 ng-model 来发挥它的魔力，但我不知道该事件是什么，或者它是否是正确的方法。 我的输入如下所示:

<input type="text" id="read" name="itemId" class="form-control center-block" placeholder="Item Id" ng-model="scannedId"/>

一旦 QR 码读取 javascript 完成工作并正常工作，我将使用以下内容设置值:

$('#read').val(data);

我尝试了以下方法来尝试手动触发一个我希望 ng-model 在分配 val(data) 后立即监听的事件，但都失败了:

$('#read').trigger('input');
and
angular.element($('#reader')).triggerHandler('onChange');

如果我手动输入，一切都会正常，但使用 JavaScript 更新时则不然。提前致谢!

Answer 1

在 Controller 内设置模型值。不要使用 jQuery。

在 Controller 内部创建一个对象: $scope.myModel = {};

然后更改您的ng-model="myModel.scannedId"

然后在 Controller 内部，您可以设置模型$scope.myModel.scannedId = data，它将自动绑定(bind)。

教训是...不要尝试使用 jQuery 显式设置“值”，特别是如果您有 ngModel 指令。 Angular 会以某种方式覆盖这一点，即使您可以看到“value”属性已更改。