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"/>

我正在使用以下内容设置值，一旦QR码读取javascript就可以了：

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

我尝试过以下尝试手动触发一个事件，我希望ng-model在分配val（数据）之后立即监听，但都失败了：

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

如果我手动输入，只是在用javascript更新时，一切正常。提前谢谢！

Answer 1

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

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

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

然后在控制器内部，您可以设置模型$scope.myModel.scannedId = data，它将自动绑定。

Lesson is ...不要尝试使用jQuery显式设置'value'，特别是如果你有ngModel指令。不管怎么说，Angular会覆盖它，即使你可以看到'value'属性已经改变了。

Answer 2

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

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

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

2 个答案: