Почему моя функция вызывается несколько раз после сканирования штрих-кода через устройство сканирования штрих-кода в angularjs? - PullRequest
Новая
       24

Почему моя функция вызывается несколько раз после сканирования штрих-кода через устройство сканирования штрих-кода в angularjs?

0 голосов
/ 25 ноября 2018

Я работаю над приложением для точек продаж, у меня возникла проблема, когда я сканирую штрих-код с помощью сканера штрих-кода, моя функция вызывается несколько раз.Например, когда я сканирую штрих-код первый раз, когда мой вызов функции один раз, когда я сканирую штрих-код без обновления страницы, то функция вызывается два раза, когда я сканирую штрих-код третий раз, затем функция вызывается 4 раза, это означает, что функция называется кратной 2Вот мой код, который я сделал, пожалуйста, проверьте и исправьте мою проблему.

// Это моя функция сканера штрих-кода, в этой функции есть два API, называемых 1 для получения всего счета через штрих-код, длина которого составляетбольше или равно 15 и 2 для после сканирования штрих-кода, чтобы получить продукт. 

$scope.returnProductByScanner = function (cod) { 
    if($location.path() == "/returnSale"){
        if(cod != undefined){
            var n = cod.length;
            if(n == 15 || n > 15){
                var action = {"barcode": cod};
                var getDt = customerService.viewInvoiceOnBarcode(action);
                getDt.then(function(data){
                    if(data.status == "success"){
                        var so = data.SO;
                        so.return = "return";
                        var sop = data.SOProducts;
                        $scope.addParkedProductIntoBag(sop,so);
                    }else{
                        var msg = data.error;
                        $scope.responseMsg(msg,"Failed");
                    }
                })
            }else{
            // if($scope.newBagListOfProduct.length > 0){
                var action = {"barcode":cod,"userid":uid,"org_id":org_id};
                var getDt = customerService.getBarcodeScannedData(action);
                    getDt.then(function(data){
                        if(data.status == "success"){
                            var prodData = data.product;
                            $scope.addProductInBagSaleReturn(prodData);
                        }else{
                            var msg = data.msg;
                            $scope.responseMsg(msg,"Failed");
                        }
                    })
                // }else{
                //     var msg = "Please first add invoice for return!";
                //     $scope.responseMsg(msg,"Failed");
                // } 
            }
        }
    //$('input[name="myInput"]').focus();
    }else{
        cod = undefined;
    }
    $('input[name="myInput"]').focus();
};

// Это мой HTML-код 

 <div>     
    <div data-barcode-scanner="returnProductByScanner"></div>
    <div><input  name="myInput" type="text" 
                 data-ng-model="testvalueret"
                 id="t"  autofocus/>
    </div>
 </div>

// Это то, что у меня естьиспользуется. 

 .directive('barcodeScanner', function() {
  return {
    restrict: 'A',    
    scope: {
        callback: '=barcodeScanner',        
      },      
    link:    function postLink(scope, iElement, iAttrs){       
        // Settings
        var zeroCode = 48;
        var nineCode = 57;
        var enterCode = 13;    
        var minLength = 3;
        var delay = 300; // ms

        // Variables
        var pressed = false; 
        var chars = []; 
        var enterPressedLast = false;

        // Timing
        var startTime = undefined;
        var endTime = undefined;

        jQuery(document).keypress(function(e) {            
            if (chars.length === 0) {
                startTime = new Date().getTime();
            } else {
                endTime = new Date().getTime();
            }

            // Register characters and enter key
            if (e.which >= zeroCode && e.which <= nineCode) {
                chars.push(String.fromCharCode(e.which));
            }

            enterPressedLast = (e.which === enterCode);

            if (pressed == false) {
                setTimeout(function(){
                    if (chars.length >= minLength && enterPressedLast) {
                        var barcode = chars.join('');                                                
                        //console.log('barcode : ' + barcode + ', scan time (ms): ' + (endTime - startTime));

                        if (angular.isFunction(scope.callback)) {
                            scope.$apply(function() {
                                scope.callback(barcode);  
                                alert(barcode);  
                            });
                        }
                    }
                    chars = [];
                    pressed = false;
                },delay);
            }
            pressed = true;
        });
    }
  };
})

1 Ответ

0 голосов
/ 25 ноября 2018

Директивы, которые добавляют обработчики событий к внешним элементам, должны удалять эти обработчики событий при разрушении области действия: 

app.directive('barcodeScanner', function() {
  return {
    restrict: 'A',    
    scope: {
        callback: '=barcodeScanner',        
      },      
    link:  function postLink(scope, iElement, iAttrs){       

       jQuery(document).on("keypress", keypressHandler);
       scope.$on("$destroy", function () {
           jQuery(document).off("keypress", keypressHandler);       
       });


       function keypressHandler(e) {            
            if (chars.length === 0) {
                startTime = new Date().getTime();
            } else {
                endTime = new Date().getTime();
            }
            //...
       }
    }
  }
})

Платформа AngularJS создает и уничтожает элементы в ходе своей работы.Когда эти элементы уничтожаются, их соответствующая область действия также уничтожается, и следует выполнять любую необходимую очистку.

...