为什么我的功能在通过angularjs中的条形码扫描器扫描条形码后多次调用？

Question

当我通过条形码扫描器扫描条形码时，我在这里处理销售点应用程序，我的功能被多次调用。例如，当我第一次扫描条形码时，我的函数调用一次，当我扫描条形码而不刷新页面时，函数调用两次；当我第三次扫描条形码时，函数调用4次，这意味着函数被称为2的倍数。这是我做过的代码，请检查并纠正我的问题。

//这是我的条形码扫描器功能，在这个函数中有两个api名为1，通过条形码获取整个发票，条形码长度大于或等于15，扫描条形码后得到产品的api为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;
        });
    }
  };
})

Answer 1

将事件处理程序添加到外部元素的指令需要在范围被销毁时删除这些事件处理程序：

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框架在其操作过程中构建并销毁元素。当这些元素被销毁时，它们各自的作用域也被销毁，任何必要的清理都应该执行。