Invoke a function within a JavaScript file from a separate file by utilizing a setTimeout method, all while incorporating the power of Angular

Question

Invoke a function within a JavaScript file from a separate file by utilizing a setTimeout method, all while incorporating the power of Angular

I've encountered an issue with my barcode scan detection code. Originally, the code was working fine when it was placed directly in an AngularJS controller. However, I needed to use the same code in another controller as well, so I moved the scan code into a separate JS file that both controllers could access. After including both files in the HTML page, I expected everything to work smoothly. But now, when the scan code detects a barcode scan and tries to call a method on the other controller, I keep getting this error:

0x800a1391 - JavaScript runtime error: 'onBarcodeScan' is undefined

The problematic section in barcodeScan.js looks like this:

setTimeout(function () {
    if (chars.length == 12) {
        var barcode = chars.join("");
        onBarcodeScan(barcode);  // This is where the error occurs
    }
    chars = [];
    pressed = false;
}, 500);

In my AngularJS controller, the function definition for onBarcodeScan is as follows:

var onBarcodeScan = function (barcode) {
    $scope.$apply(function () {
        $scope.state.userEnteredSubId = barcode;
        $scope.onSubmitSubId();
    });
}

I can't seem to figure out what I'm missing. It's worth noting that the order of script inclusion in the index HTML page is correct:

<script src="js/cassetteController.js"></script>
<script src="js/barcodeScan.js"></script>

javascript angularjs

Answer 1

Answer №1

I stumbled upon a helpful blog post discussing the use of events in an AngularJS factory. Below is the functional code snippet:

Controller:

scannerService.notify();

scannerService.subscribe($scope, function () {
    // Handle notification
    $scope.$apply(function () {
        $scope.state.userEnteredSubId = $rootScope.scan;
        $scope.onSubmitSubId();
    });
});

Factory:

app.factory('scannerService', ['$http', '$rootScope', function ($http, $rootScope) {
    var listenerAdded;

    return {
        subscribe: function (scope, callback) {
            var handler = $rootScope.$on('notifying-service-event', callback);
            scope.$on('$destroy', handler);
        },

        initialize: function () {
            if (listenerAdded) {
                return;
            }
            // Taken from http://www.deadosaurus.com/detect-a-usb-barcode-scanner-with-javascript/:
            listenerAdded = true;
            var pressed = false;
            var chars = [];
            document.addEventListener('keydown', function (event) {
                // Ignore this if the user is hitting enter, or any other non-number.
                if (event.keyCode < 48 || event.keyCode > 57) {
                    return;
                }
                // Only capture numbers, because a subId is all numbers.
                if (event.keyCode >= 48 && event.keyCode <= 57) {
                    // Note: These keycodes are only for numbers along the top of the keyboard; the number pad uses a different range.
                    chars.push(String.fromCharCode(event.keyCode));
                }
                console.log(event.keyCode + ":" + chars.join("|"));
                if (pressed == false) {
                    // Using Angular's $timeout instead of setTimeout to avoid needing $scope.apply().
                    // Reference: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
                    setTimeout(function () {
                        if (chars.length == 12) {
                            var barcode = chars.join("");
                            $rootScope.scan = barcode;
                            $rootScope.$emit('notifying-service-event');
                        }
                        chars = [];
                        pressed = false;
                    }, 500);
                }
                pressed = true;
            });
        }
    };
}]);

Answer 2

I stumbled upon a helpful blog post discussing the use of events in an AngularJS factory. Below is the functional code snippet:

Controller:

scannerService.notify();

scannerService.subscribe($scope, function () {
    // Handle notification
    $scope.$apply(function () {
        $scope.state.userEnteredSubId = $rootScope.scan;
        $scope.onSubmitSubId();
    });
});

Factory:

app.factory('scannerService', ['$http', '$rootScope', function ($http, $rootScope) {
    var listenerAdded;

    return {
        subscribe: function (scope, callback) {
            var handler = $rootScope.$on('notifying-service-event', callback);
            scope.$on('$destroy', handler);
        },

        initialize: function () {
            if (listenerAdded) {
                return;
            }
            // Taken from http://www.deadosaurus.com/detect-a-usb-barcode-scanner-with-javascript/:
            listenerAdded = true;
            var pressed = false;
            var chars = [];
            document.addEventListener('keydown', function (event) {
                // Ignore this if the user is hitting enter, or any other non-number.
                if (event.keyCode < 48 || event.keyCode > 57) {
                    return;
                }
                // Only capture numbers, because a subId is all numbers.
                if (event.keyCode >= 48 && event.keyCode <= 57) {
                    // Note: These keycodes are only for numbers along the top of the keyboard; the number pad uses a different range.
                    chars.push(String.fromCharCode(event.keyCode));
                }
                console.log(event.keyCode + ":" + chars.join("|"));
                if (pressed == false) {
                    // Using Angular's $timeout instead of setTimeout to avoid needing $scope.apply().
                    // Reference: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
                    setTimeout(function () {
                        if (chars.length == 12) {
                            var barcode = chars.join("");
                            $rootScope.scan = barcode;
                            $rootScope.$emit('notifying-service-event');
                        }
                        chars = [];
                        pressed = false;
                    }, 500);
                }
                pressed = true;
            });
        }
    };
}]);

Invoke a function within a JavaScript file from a separate file by utilizing a setTimeout method, all while incorporating the power of Angular

Answer №1

Similar questions

Animating numerous elements simultaneously during Vue component rendering

AngularJS - Issue with NgView functionality

Creating a virtual roulette wheel with JavaScript

Custom directive to change the background image is not functioning as expected

Is Riot.js the best choice for server-side rendering and routing?

Omit the <span> tag when exporting to XLS format

Tips for updating a nested MongoDB object

Angular.js assigns a null value to the model when filtering ng-options

No alteration is made to the value stored in the variable $scope.data

broadcast a video file from a Node.js server to multiple HTML5 clients at the same time

Executing AngularJS controller upon view initialization

The process of generating collection names dynamically based on user information

Securing specific pages in Angular front-end: A guide to implementing authentication

Is it possible to configure Cypress to always open in the current tab instead of opening in a new tab?

Issue with Durandal dialog repositioning failing to function

unable to gather information from suppliers

Tips on simulating the Q functions during unit testing in node.js using mocha and rewire!

Add a new element to the page with a smooth fade-in animation using jQuery

Challenge in Decision Making

Ways to retrieve a specific value in an array of objects