0

I am making a web application using angularJS 1.5. The user will be interacting with the webpage using barcode scanner connected to the network. The connection itself is done through a websocket which returns me the value which was scanned.

What I would like to do is:

  • Check which field has focus on the screen
  • Set the value of this field to the scanned barcode
  • Trigger the event for the field

This is the code I have now:

self.scannerSocket.onmessage = function (e) {
    // Get the scanned barcode from the event
    var obj = JSON.parse(e.data);
    var message = obj.Body.Values[0].Value;
    var value = message.replace(/ +(?= )/g,'');

    // Get the element which has focus on the screen
    var $focusedElement = $($document[0].activeElement);
    if(! $focusedElement || $focusedElement.is(":disabled")) return;

    // Set the new value of the element
    $focusedElement.val(value);

    // Trigger the enter event on the element
    $timeout(function(){
        var e = jQuery.Event("keypress");
        e.which = 13;
        e.keyCode = 13;
        $focusedElement.trigger(e);
    });
};

The issue is that changing the value of the element does not change the ng-model behind this element. I was thinking to do something like this:

var model = $focusedElement.attr("ng-model");
$scope[model] = value;

The issue is however that the code for the websocket is in a service. So there is no $scope. Plus there are multiple isolated components in my application. Each with their own scope. The scanning should work on all the input fields in the screen.

So Question: how can I change the value of the ng-model behind the element?

Anonymoose
  • 2,389
  • 6
  • 36
  • 69
  • There are fundamental flaws in you application if you want to edit a element inside a service. A service is to provide the data not to set it. Also the only place for DOM manipulation is inside a directive/component. You should reconsider your application structure. – MrWook Jun 27 '18 at 08:33
  • @MrWook, I am in reality working with a callback to my maincontroller. But the issue remains that from my maincontroller I cannot access all the scope variables of all components. – Anonymoose Jun 27 '18 at 08:34
  • What about sending an $emit event and catch it inside the component controller? – MrWook Jun 27 '18 at 08:38
  • @MrWook So you mean to catch the event inside every component controller? I would need to make sure the DOM element is part of that specific component. – Anonymoose Jun 27 '18 at 08:41
  • I'm just curious now but you have for every freaking part of your application a own component with a isolated scope? Just why? Btw you can try to move the $focusedElement.val(value); inside the timeout or trigger the $apply inside the maincontroller – MrWook Jun 27 '18 at 08:56
  • @MrWook This is actually applying the component-based approach from Angular in AngularJS. Where all components are isolated. – Anonymoose Jun 27 '18 at 09:21

1 Answers1

0

I was able to update the model using

        $focusedElement.trigger('input');
        $focusedElement.trigger('change');

Solution Found here: Update Angular model after setting input value with jQuery

Anonymoose
  • 2,389
  • 6
  • 36
  • 69