为什么我的函数在 angularjs 中通过条码扫描器设备扫描条码后调用了多次?
Why my function called multiple times after scanning the barcode through barcode scanner device in angularjs?
我正在这里开发销售点应用程序 我在通过条码扫描器设备扫描条码时遇到问题,我的函数调用了多次。例如,当我第一次扫描条码时我的函数调用一次,当我扫描条码而不刷新页面时调用函数两次,当我第三次扫描条码时调用函数 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;
});
}
};
})
向外部元素添加事件处理程序的指令需要在范围被销毁时删除这些事件处理程序:
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 框架在其运行过程中构建和销毁元素。当这些元素被销毁时,它们各自的范围也被销毁,并且应该执行任何必要的清理。
我正在这里开发销售点应用程序 我在通过条码扫描器设备扫描条码时遇到问题,我的函数调用了多次。例如,当我第一次扫描条码时我的函数调用一次,当我扫描条码而不刷新页面时调用函数两次,当我第三次扫描条码时调用函数 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;
});
}
};
})
向外部元素添加事件处理程序的指令需要在范围被销毁时删除这些事件处理程序:
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 框架在其运行过程中构建和销毁元素。当这些元素被销毁时,它们各自的范围也被销毁,并且应该执行任何必要的清理。