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

Question

I have a text box that gets populated using javascript that is getting the data by reading a QR code and setting the value. I am using ng-model to bind to a variable in my controller which works fine when I type manually into the text box just not when it is populated with javascript. I am guessing there is some event I have to manually fire to trigger ng-model to do it's magic but I do not know what that event is or if it is even the right approach. My input looks like:

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

I am setting the value with the following once the QR code reading javascript does it's thing and works:

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

I have tried the following to try and manually trigger an event I hoped ng-model would be listening for right after assigning val(data) but both fail:

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

Everything works fine if I type in it manually just not when updated with javascript. Thanks in advance!

daleyjem · Accepted Answer · 2015-01-02 05:39:33Z

2

Set the model value inside of your controller. Don't use jQuery.

Inside of your controller, create an object: $scope.myModel = {};

Then change your ng-model="myModel.scannedId"

Then inside of your controller, you can set the model $scope.myModel.scannedId = data and it will automatically bind.

Lesson being... Don't try to explicitly set 'value' with jQuery, especially if you have the ngModel directive on it. Somehow Angular overrides this, even when you can see the 'value' attribute has changed.

edited Jan 2, 2015 at 5:39

answered Jan 1, 2015 at 23:23

daleyjem

2,7241 gold badge31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Animal Style Over a year ago

The code involved for reading a QR code is a third party library in which I pass in a function to set the value defined by ($('#read').val(data);). So unless I can somehow pass a controller method to the 3rd party js I would not be able to set the value in the controller. I was hoping I could fire some event on the input that would trigger ng-model to bind.

Animal Style Over a year ago

I used this github.com/dwa012/html5-qrcode and made some modifications to it. It is a wrapper around github.com/LazarSoft/jsqrcode to stream video on intervals.

daleyjem Over a year ago

What triggers calling the qrcode reader? Is it on file upload? Are you inserting an <img> tag into the <div> before calling it?

Animal Style Over a year ago

It samples the video camera on an interval and passes that img like in the sample of the html5-qrcode project. The input gets populated just fine I think it just by passes some event that typing in the input triggers. I am updating the question to show my failed attempts at manually triggering events.

daleyjem Over a year ago

Take a look at this plunkr: plnkr.co/edit/6bayLaFqZv58CqKKklbF?p=preview Basically, I created a directive that takes a 'callback' parameter. The 3rd party plugin is initialized on the qrcode directive and sends any data to that 'callback' function within your controller. Then the model is updated.

|

Hitmands · Accepted Answer · 2015-10-29 22:31:19Z

0

When you're outside from the AngularJS Environment you need to manual trigger the DigestCycle... So, try something like that:

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

answered Oct 29, 2015 at 22:31

Hitmands

14.2k4 gold badges41 silver badges78 bronze badges

1 Comment

Aravind Over a year ago

can you create a plunker for me?

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related