How to use angular-qrcode Angular?

Question

(As suggested by George Stocker in the comments I've edited this question so that it is now about angular-qrcode instead of QRCode.js.)

I'm trying to use angular-qrcode to display qr-codes in Angular, but I can't get it to work. I'm currently simply trying this code as described in the readme:

<qrcode data="string"></qrcode>

Unfortunatel it doesn't do anything. I don't get any error, but I don't see any qr-image either.

To give a working example I forked the angular-phonecat tutorial here and tried using angular-qrcode in that code (commit here).

Does anybody know what I'm doing wrong trying to use angular-qrcode? All tips are welcome!

Solution

Never access the DOM in the controller, use directives for that.

Instead of creating your own directive you might want to have a look at Angular-qrcode.

The short version of how to use this library is just this:

<qrcode data="{{url}}"></qrcode>

To get this to work you need to include both the original qr-code generator and the angular wrapper (angular-qrcode) scripts in your html. Also remember to add 'monospaced.qrcode' as a module-dependency.

Comments

[kramer65]

Thanks for the tip. I've been trying to implement that, but when simply paste this <qrcode data="ABC"></qrcode> into the partial (either in or outside the ng-repeat) I don't get anything result; no qr-code, no error in the console, nothing. I wanted to make a jsfiddle out of it, but I don't know how to load angular-qrcode into it. Could you help me a little bit more to get this to work?

[kramer65]

I now forked the angular-phonecat tutorial and tried using angular-qrcode in there (commit here: github.com/kramer65/angular-phonecat/commit/…), but I really can't get it to work. Would you know what I'm doing wrong here?

[Aleksander Blomskøld]

@kramer65 I've updated my answer with a little bit more information. I've also forked your github repo and made it working with this commit: github.com/aleksabl/angular-phonecat/commit/…

[kramer65]

Works like a charm. Stupid that I didn't realise that I had to also use qrcode-generator. Thanks a million! I can't award you the 200 points yet (I have to wait a couple more hours), but I will do so as soon as I can. I wish you a beautiful day!