current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

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!

share|improve this question
    
please add a fiddle – Anubhav Jan 1 '15 at 23:20
up vote 2 down vote accepted

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.

share|improve this answer
1  
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 Jan 1 '15 at 23:34
1  
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. – Animal Style Jan 2 '15 at 3:53
1  
What triggers calling the qrcode reader? Is it on file upload? Are you inserting an <img> tag into the <div> before calling it? – daleyjem Jan 2 '15 at 4:52
1  
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. – Animal Style Jan 2 '15 at 4:53
1  
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. – daleyjem Jan 2 '15 at 5:28
up vote 0 down vote

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'; });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.