javascript - 如何使用 AngularJS 在页面中附加多个扫描的条形码结果数据

Question

我有一个应用程序，我必须扫描条形码并将其显示到其他页面。最初的要求只是针对一种产品，但现在的要求是在现有 div 中显示多个扫描的条形码结果。我已成功在我的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);
}

})

这是我的 html 页面，我使用 ng-repeat 调用 barcoderesults 变量:

<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 扫描条形码后，我导航到屏幕 2，在屏幕 2 中显示结果，在屏幕 2 中，我有继续扫描按钮，该按钮使用相同的功能 ng-click="startScan()"。我尝试在同一 Controller 中执行以下代码来显示多个结果，但无法实现:

if($scope.startScan){
                    $rootScope.barcoderesults.push({Barcode:$rootScope.barcoderesults});
                    $rootScope.barcoderesults = '';
                };

有人可以帮我解决这个问题吗，因为我是 AngularJS 的新手。我正在使用 AngularJS + Ionic + Cordova。非常感谢。

Answer 1

首先:如果您需要在 Controller 之间共享某些状态，那么您需要在服务中保存此状态(嵌套 Controller 有更多选项，但情况并非如此)。因此，您需要一个可以进行扫描并保存扫描条形码的服务:

(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;
          });
        }
      }
    ]);
}());

此外，让我们创建自定义指令来调用条形码扫描以防止污染 Controller :

(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();
          }
        }
      };
    }
  ]);
}());

有了这两张图片，您就可以将 Controller 编写为:

(function() {
  angular.module('myApp').controller('HomeController', 
  ['$scope', 'barcodeService',
    function($scope, barcodeService) {
      $scope.barcodes = barcodeService.barcodes;
    }
  ]);
})();

和 View 模板:

<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>

请注意 barcodeScan 指令的 initial-scan 属性。当此属性具有 true 值时，在指令加载到 View 中后立即启动条形码扫描。实际上，您可以将此指令放在屏幕 2 上并完全删除屏幕 1。一路上，对于单个屏幕 2 或屏幕 1 和屏幕 2，条形码将在 Controller 之间共享。

Plunker here

此外，作为附加选项，您可以使用 barcodeService.scanBarcode 方法来解决屏幕 2 路由的 resolve 选项。这样，当用户在屏幕 2 上导航时，其 Controller 将接收扫描的条形码: Plunker with screen2 route resolve