问题描述
我有，我有扫描棒code和展示给其他页面的应用程序。最初要求是只有一个产品，但现在的要求是显示现有的多个扫描棒code结果 DIV 。我设法使用下面我controller.js code在页面中显示一个产品吧code扫描结果：
I have a application in which I have to scan a barcode and show it to other page. The Initially requirement was for one product only but now the requirement is to show multiple scanned barcode result in existing div. I have managed to show for one product barcode scan result in a page using following code in my controller.js:
.controller('ScanCtrl', function($scope, $rootScope, $state, $ionicLoading, $timeout) {
$scope.title = "How to scan an inventory";
$scope.startScan = function() {
$ionicLoading.show({
template: 'Scanning Barcode....'
});
$timeout(function() {
$ionicLoading.hide();
window.cordova.plugins.barcodeScanner.scan(
function (result) {
$rootScope.barcoderesults = [{
Barcode: result.text
}];
alert('We got a barcode');
$state.go('page.scan-detail');
/*if($scope.startScan){
$rootScope.barcoderesults.push({Barcode:$rootScope.barcoderesults});
$rootScope.barcoderesults = '';
};*/
},
function (error) {
alert("Scanning failed: " + error);
}
);
}, 1000, false);
}
})
而这正是我打电话了酒吧coderesults 变量用我的html页面 NG-重复
and this is my html page where I am calling that barcoderesults variable using ng-repeat:
<ion-view title="Scan Result">
<ion-content class="has-header padding-top">
<div class="card">
<div class="item item-text-wrap">
<div ng-repeat="barcoderesult in barcoderesults">Barcode: {{barcoderesult.Barcode}}</div>
</div>
<div class="item item-content">
<!-- Scan Button -->
<button class="button button-block button-assertive" ng-click="startScan()">Continue Scan</button>
<center><h3>OR</h3></center>
<button class="button button-block button-calm" ng-click="">Checkout</button>
</div>
</div>
</ion-content>
</ion-view>
现在的情况是从屏幕1扫描棒code后，我浏览到屏幕2，我展示的结果，并在屏幕2我是继续扫描按钮，这是使用相同的功能 NG-点击=startScan（）。我尝试以下code在我同一个控制器来显示多个结果，但无法实现的：
Now the scenario is after scanning the barcode from screen 1 I navigate to screen 2 where I show the result and in screen 2 I have Continue Scan button, which is using the same function ng-click="startScan()". I was trying following code in my same controller to show multiple results but couldn't achieved:
if($scope.startScan){
$rootScope.barcoderesults.push({Barcode:$rootScope.barcoderesults});
$rootScope.barcoderesults = '';
};
有一个人可以帮我在这，因为我在AngularJS新。我使用AngularJS +离子+科尔多瓦。提前很多感谢。
Can some one please help me on this as I am new in AngularJS. I am using AngularJS + Ionic + Cordova. Many thanks in advance.
推荐答案
thisngs首先：如果你需要共享控制器之间的一些状态，那么您需要保存服务这个状态（有嵌套控制器的更多选择，但这难道不是这种情况）。
所以，你需要一个在役它应该做的扫描和扫描持有酒吧codeS：
First of thisngs: if you need to share some state between controllers, then you need to save this state in service (there are more options with nested controllers, but this not such case). So, you need a servie which should do scanning and holds scanned barcodes:
(function() {
angular.module('myApp')
.factory('barcodeService', ['$q', '$timeout', '$window',
function($q, $timeout, $window) {
var scanTimeout = 1000,
barcodes = [];
return {
barcodes: barcodes,
scanBarcode: scanBarcode
};
function scanBarcode() {
var deferred = $q.defer();
var rejectByTimeout = $timeout(function() {
deferred.reject('timeout rejection');
}, scanTimeout, false);
$window.cordova.plugins.barcodeScanner.scan(
function(result) {
deferred.resolve(result);
},
function(error) {
deferred.reject(error);
});
return deferred.promise.then(function(barcode){
if(barcodes.indexOf(barcode) == -1){
barcodes.push(barcode);
}
return barcode;
});
}
}
]);
}());
此外，让我们创建自定义的指令，用于调用吧code扫描至prevent污染控制器：
Also, let's create custom directive for invoking barcode scan to prevent polluting controllers:
(function() {
angular.module('myApp').directive('barcodeScan', ['$log', 'barcodeService',
function($log, barcodeService) {
return {
restrict: 'AE',
replace: true,
template: "<button ng-click='doScan()' >Scan Barcode</button>",
link: function(scope, element, attrs) {
scope.doScan = function() {
barcodeService.scanBarcode()
.then(function(barcode) {
$log.info('Barcode scan succeeded with result: ' + barcode);
}, function(error) {
$log.error('Barcode scan failed with error: ' + error);
});
};
if (attrs.initialScan.toLowerCase() === 'true') {
scope.doScan();
}
}
};
}
]);
}());
有了这两PICES你可以写你的控制器：
With this two pices in place you can write your controller as:
(function() {
angular.module('myApp').controller('HomeController',
['$scope', 'barcodeService',
function($scope, barcodeService) {
$scope.barcodes = barcodeService.barcodes;
}
]);
})();
和视图模板：
<div ng-controller='HomeController'>
<barcode-scan barcodes='barcodes' initial-scan='true' ></barcode-scan>
<hr />
<ul ng-repeat='barcode in barcodes' >
<li ng-bind='barcode'></li>
</ul>
</div>
借鉴你注意属性。当这个属性酒吧codeScan 指令的初始扫描真正价值，酒吧code扫描加载到视图指令之后立即开始。
其实，你可以把这个指令onot屏幕2，并删除画面1可言。一路上，有单屏2或两者屏幕1和屏幕2，酒吧codeS将控制器之间共享。
Draw your attention on initial-scan attribute of the barcodeScan directive. When this attribute has true value, barcode scanning initiated immediately after directive loaded into view.Actually, you can put this directive onot a screen 2 and remove screen 1 at all. All the way, with single screen 2 or both screen 1 and screen 2, barcodes will be shared between controllers.
此外，作为一个附加选项，你可以使用酒吧codeService.scanBar code 解决方法屏幕2路线的选择。这样，当用户在屏幕上2进行导航，它的控制器将获得扫描棒code：的
Also, as an additional option, you can use barcodeService.scanBarcode method for resolve option of screen 2 route. This way, when user will be navigated on screen 2, it's controller will receive scanned barcode: Plunker with screen2 route resolve
这篇关于如何使用AngularJS追加在一个页面中的多个扫描棒code结果数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！