Ionic cordova - an example of generating a QR code

Question

I am building a cordova application using an ionic framework. This application needs the ability to generate a QR code based on this text. I found http://davidshimjs.imtqy.com/qrcodejs/ as a solution. But I could not implement this in my ionic application. I need an example for this task, implemented by qrcodejs or any other libraries. Thank!

Answer 1

Neither angular-qr nor angular-qrcode worked for me, so I ended up quickly flipping my own directive based on Shim Sangmin's QRMode generator library :

<!-- index.html -->
<script src="lib/qrcode.js/qrcode.js"></script>

-

// directives.js
.directive('qrcode', function($interpolate) {  
  return {
    restrict: 'E',
    link: function($scope, $element, $attrs) {

      var options = {
        text: '',
        width: 128,
        height: 128,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: 'H'
      };

      Object.keys(options).forEach(function(key) {
        options[key] = $interpolate($attrs[key] || '')($scope) || options[key];
      });

      options.correctLevel = QRCode.CorrectLevel[options.correctLevel];

      new QRCode($element[0], options);

    }
  };
});

Then use it like this:

<qrcode text="{{something.on.scope}}" color-bright="#ff0000"></qrcode>
<!-- or width, height, color-dark, correct-level -->

Edit: check this out on JSFiddle .

Answer 2

So, you need an angular module, in most cases you will need to create your own directive, module or angular code to integrate the JavaScript plugin. But someone has already done this, I would look at http://ngmodules.org/modules/angular-qr should be what you are looking for. See Demo: http://janantala.imtqy.com/angular-qr/demo/

Answer 3

angular -qrcode. , "monospaced.qrcode" app.js. .