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

Question

我有一个使用 javascript 填充的文本框，该文本框通过读取 QR 码并设置值来获取数据。我正在使用 ng-model 绑定到我的控制器中的一个变量，当我在文本框中手动键入时它工作正常，而不是在它填充了 javascript 时。我猜有一些事件我必须手动触发才能触发 ng-model 来发挥它的魔力，但我不知道那个事件是什么，或者它是否是正确的方法。 我的输入看起来像：

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

一旦读取 javascript 的 QR 码完成并工作，我将使用以下值设置值：

$('#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 显式设置“值”，特别是如果您有 ngModel 指令。 Angular 会以某种方式覆盖它，即使您可以看到 'value' 属性已更改。

Answer 2

当您在 AngularJS 环境之外时，您需要手动触发 DigestCycle...所以，尝试这样的事情：

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