angular扫描二维码后不打印数据

Question

我正在为 cordova 使用 NativeStorage 和 barcodeScanner 插件。

捕获效果很好，我收到了 QRCode，但出于某种原因 angular 没有打印它。

在我的代码上做了很多工作之后，我无法进行有效的回调，所以 angular 可以打印它绑定数据。

下面是我粘贴的代码。

read.js

(function() {
  'use strict';

  var read = angular.module('app.read', ['monospaced.qrcode']);

  read.controller('ReadController', [
    function() {

      var data = this;

      var qr = function(string) {
        data.code = string;
        console.log(string);
      };

      cordova.plugins.barcodeScanner.scan(
        function(result) {
          if (!result.cancelled) {
            if (result.format === "QR_CODE") {
              (function(cb) {
                cb(result.text);
              })(qr);
              NativeStorage.getItem("historic", function(d) {
                var storage = JSON.parse(d);
                storage.push(result.text);
                NativeStorage.setItem("historic", JSON.stringify(storage), function(response) {}, function(e) {
                  console.log(e);
                });
              }, function(e) {
                window.alert("Scanning failed: " + e);
              });
            }
          }
        },
        function(e) {
          window.alert("Scanning failed: " + e);
        }, {
          "preferFrontCamera": true, // iOS and Android 
          "showFlipCameraButton": true, // iOS and Android 
          "prompt": "Place a barcode inside the scan area", // supported on Android only 
          "formats": "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED 
          "orientation": "portrait" // Android only (portrait|landscape), default unset so it rotates with the device 
        }
      );
    }
  ]);

}());

read.html

<div ng-controller="ReadController as myRead">
  <qrcode version="5" error-correction-level="H" size="200" data="{{myRead.code}}" href="{{myRead.code}}"></qrcode>
  <a href="{{myRead.code}}">{{myRead.code}}</a>
</div>

只是添加了一些我之前做过的额外测试，我只是错过了 barcodeScanner.scan 过程，我只是做了如下所示的存储：

NativeStorage.getItem("historic", function (d) {
   var storage = JSON.parse(d);
   storage.push('https://google.es');
   data.code = 'https://google.es';
   NativeStorage.setItem("historic", JSON.stringify(storage), function (response) {}, function (e) {
      console.log(e);
   });
}, function (e) {
   window.alert("Scanning failed: " + e);
});

你能告诉我哪里错了吗？

谢谢指教。

Answer 1

一个合格的猜测是 cordova.plugins.barcodeScanner.scan 的回调不会触发 AngularJS' 摘要循环，这意味着不会执行脏检查，不会检测到任何更改并且 UI 不会再更新了。

尝试将代码包装在 $apply 的成功回调中：

function(result) {
  $scope.$apply(function() {
    if (!result.cancelled) {
      if (result.format === "QR_CODE") {
        (function(cb) {
          cb(result.text);
        })(qr);
        NativeStorage.getItem("historic", function(d) {
          var storage = JSON.parse(d);
          storage.push(result.text);
          NativeStorage.setItem("historic", JSON.stringify(storage), function(response) {}, function(e) {
            console.log(e);
          });
        }, function(e) {
          window.alert("Scanning failed: " + e);
        });
      }
    }
  });
}

angular扫描二维码后不打印数据

angular doesn't print data after scanning qr

javascript

angularjs

cordova

cordova-plugins

cordova-nativestorage