angular doesn't print data after scanning qr

Question

I'm working with NativeStorage and barcodeScanner plugins for cordova.

The capture works well, and I receive the QRCode, but for any reason angular doesn't print it.

After working a lot on my code, I'm not able to do a valid callback, so angular can print it binding the data.

Here bellow I paste the code.

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>

Just adding some extra tests I have done before, I just missed the barcodeScanner.scan process and I did just the storage as I show 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);
});

Could you show me where am I wrong?

Thanks in advice.

Answer 1

A qualified guess is that the callbacks from cordova.plugins.barcodeScanner.scan doesn't trigger AngularJS' digest cycle, which means no dirty checking will be performed, no changes will be detected and the UI won't be updated.

Try wrapping the code in the success callback in $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);
        });
      }
    }
  });
}