Angular 扫描 QR 后不打印数据

Question

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

捕获效果很好，我收到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过程，而我只是在显示Bellow时才进行了存储：

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