当通过 javascript 填充文本框时，使用 ng-model 的输入不绑定

Question

我有一个使用 javascript 填充的文本框，它通过读取二维码并设置值来获取数据。我正在使用 ng-model 绑定到我的控制器中的一个变量，当我手动输入文本框时它工作正常，而不是当它填充 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

在控制器中设置模型值。不要使用 jQuery.

在你的控制器中，创建一个对象： $scope.myModel = {};

然后改变你的ng-model="myModel.scannedId"

然后在你的控制器里面，你可以设置模型$scope.myModel.scannedId = data它会自动绑定。

教训是...不要试图用 jQuery 显式设置 'value'，尤其是当您有 ngModel 指令时。 Angular 以某种方式覆盖了它，即使您可以看到 'value' 属性已更改。

Answer 2

当您在 AngularJS 环境之外时，您需要手动触发 DigestCycle...因此，尝试类似的操作：

var scope = $('#read').scope(); scope.apply(function() {scope.scannedId = 'new value outside AngularJS LifeCycle'; });

当通过 javascript 填充文本框时，使用 ng-model 的输入不绑定

Input using ng-model not binding when textbox is populated via javascript

javascript

jquery

angularjs

angular-ngmodel