javascript - 扫描qr后 Angular 不打印数据

我正在为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流程，并且在下面显示的时候我只是做存储：

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

你能告诉我我哪里错了吗？

感谢您的建议。

最佳答案

一个合理的猜测是，来自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);
        });
      }
    }
  });
}