DevStarlight DevStarlight - 5 months ago 43
AngularJS Question

angular doesn't print data after scanning qr

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

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