2015-03-13 84 views
1

(由乔治·斯托克在评论中我已经编辑了这个问题,以便它现在大约是角QRCode的,而不是QRCode.js建议。)如何使用angular-qrcode Angular?

我试图用angular-qrcode显示的QR码有角度的,但我无法让它工作。我目前只是试图将该代码作为the readme描述:

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

Unfortunatel它不会做任何事情。我没有得到任何错误,但是我也没有看到任何qr-image。

为了给出一个工作示例,我分叉了angular-phonecat tutorial here并尝试在该代码中使用angular-qrcode(commit here)。

有没有人知道我做错了试图使用angular-qrcode?欢迎所有提示!

+0

帮助我们回答您的问题的一件事是您花时间编写代码来重现问题并将其置于您的问题中。只要发布一个链接,如果该链接死亡或宕机,我们将无法看到您的代码。而且,将你的代码加入你的问题迫使你花时间减少垃圾并让我们轻松跟随。 – 2015-03-16 12:14:32

+0

@GeorgeStocker - 我编辑了我的问题,并添加了我目前正在尝试的代码(只有一行)。不幸的是,它不会产生所需的结果(qr代码),但它也不会给出错误。它只是不显示任何东西。这个问题是否更好? – kramer65 2015-03-16 12:38:33

+0

在控制台中是否有任何东西出现?当你输入'var g = new QRCode(document.getElementById(“ticket-qrcode”),“ABC”);'在控制台中,会发生什么?如果你然后访问'g',它是未定义的还是存在一个实例化的对象? – 2015-03-16 12:44:40

回答

9

永远不要访问控制器中的DOM,请使用directives

而不是创建自己的指令,你可能想看看Angular-qrcode

如何使用这个库的短版就是这样的:

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

为了得到这个工作,你需要在你的HTML两种original qr-code generator和角包装(角QR码)的脚本。还请记住添加'monospaced.qrcode'作为模块依赖项。

+0

感谢您的提示。我一直在努力实现这一点,但是当简单地将这个''粘贴到部分(在ng-repeat内部或外部)时,我不会得到任何结果;没有qr码,在控制台没有错误,没有。我想做一个jsfiddle,但我不知道如何加载angular-qrcode。你能帮我多一点,让这个工作? – kramer65 2015-03-13 14:28:14

+0

我现在分叉角手机教程,并尝试在那里使用angular-qrcode(在这里提交:https://github.com/kramer65/angular-phonecat/commit/6e686f49827c0992378d611bab68517c7bf3b6b0),但我真的无法得到它的工作。你知道我在这里做错了吗? – kramer65 2015-03-16 10:46:13

+0

@ kramer65我用更多的信息更新了我的答案。我也分叉你的github回购,并使其与此承诺工作:https://github.com/aleksabl/angular-phonecat/commit/1695e5e073e286eb044f4dd3acc83bb03fe5d629 – 2015-03-16 19:19:53