Question

您好我正在使用我的项目库存管理之一，用户扫描任何产品条形码并获取价值并使用它。我使用以下代码成功实现了这一目标：

.controller('ScanCtrl', function($scope, $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) {
                alert("We got a barcode\n" +
                    "Result: " + result.text + "\n" +
                    "Format: " + result.format + "\n" +
                    "Cancelled: " + result.cancelled);
            }, 
            function (error) {
                alert("Scanning failed: " + error);
            }

        );
     }, 1000, false);
 }

使用上面的代码我在警告弹出框中得到了扫描结果，这绝对没问题，但是新要求就出现了，所以扫描结果应该显示在页面而不是警告弹出框中。我使用了以下方法来实现：

.controller('ScanCtrl', function($scope, $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) {
               $scope.barcoderesults = [{
                    Result: result.text,
                    Format: result.format,
                    Cancelled: result.cancelled
                }];

                $state.go('page.scan-detail');
                /*alert("We got a barcode\n" +
                    "Result: " + result.text + "\n" +
                    "Format: " + result.format + "\n" +
                    "Cancelled: " + result.cancelled);*/
            }, 
            function (error) {
                alert("Scanning failed: " + error);
            }

        );
    }, 1000, false);
  }
})

我在app.js代码中使用以下代码：

.state('page.scan', {
  url: '/scan',
  views: {
    'page-main': {
      templateUrl: 'templates/pages/scan.html',
      controller: 'ScanCtrl'
    }
  }
})

.state('page.scan-detail', {
  url: '/scan-detail',
  views: {
    'page-main': {
      templateUrl: 'templates/pages/scan-detail.html',
      controller: 'ScanCtrl'

    }
  }
})

在扫描详细信息页面中，我使用以下html：

<ion-view title="Scan Detail">
  <ion-content class="has-header padding-top">
    <center><h3>{{title}}</h3></center>
  <div class="card">
    <div class="item item-text-wrap">
      <div class="item item-content">
        <div ng-repeat="barcoderesult in barcoderesults">Result: {{barcoderesult.Result}} <br /> Format: {{barcoderesult.Format}} <br />Cancelled: {{barcoderesult.Cancelled}}</div>
      </div>
  </div>
  <div class="item item-content">
    <!-- Scan Button -->
    <button class="button button-block button-assertive" ng-click="startScan()">Start Scan</button>
  </div>
</div>

  </ion-content>
</ion-view>

问题：按下开始扫描按钮后（使用ng-click =＆＃34; startScan（）＆＃34;），它进入新页面，但没有显示扫描结果。我再次按下它扫描的新页面（扫描细节）上的开始扫描按钮，结果出现在页面上。我尝试了很多东西，但第一次没有得到结果。有人可以帮我这个我是AngularJS的新手我希望有办法做到这一点。

先谢谢。

注意：我正在使用Cordova，AngularJS＆amp;离子型的。

Answer 1

您需要将扫描结果存储在service / rootScope中，以便跨控制器保留数据。像这样：

.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) {
               //make the change here
               $rootScope.barcoderesults = [{
                    Result: result.text,
                    Format: result.format,
                    Cancelled: result.cancelled
                }];

                $state.go('page.scan-detail');
                /*alert("We got a barcode\n" +
                    "Result: " + result.text + "\n" +
                    "Format: " + result.format + "\n" +
                    "Cancelled: " + result.cancelled);*/
            }, 
            function (error) {
                alert("Scanning failed: " + error);
            }

        );
    }, 1000, false);
}
})

如何在html上显示条形码扫描结果，而不是在angularjs + Ionic中显示警报

1 个答案: