Comments (2)
Unfortunately, I'm not too familiar with Angular myself but I cannot think why a framework like Angular would prevent the use of this library as you would without Angular, so I think your question is more targeted at how to use Angular, which I'm afraid is out-of-scope for here.
It really depends what you mean by real-time and that could even be specific to your application. If you're relying on Angular's automatic updates on bound scopes, then a quick Google revealed that this could help:
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch
I'm assuming you simply register a listener to trigger a function on change to the scope which you could write to update qr.js. This could be done as a directive, which I think that's the correct Angular terminology, but I could be wrong.
Good luck!
from qrious.
angular
.module( "hub.extern" )
.factory( "QRious", getQrious );
/** @ngInject */
function getQrious( $window ) {
if( !$window.QRious ) {
throw new Error( "Attempted to access global symbol 'QRious', which isn't loaded!" );
}
return $window.QRious;
}
angular
.module( "hub.qrCode" )
.component( "qrCode", {
template : "<img>",
controller : QrCodeControllerFactory,
controllerAs : "vm",
bindings : {
background : "<?",
backgroundAlpha : "<?",
foreground : "<?",
foregroundAlpha : "<?",
level : "<?",
mime : "<?",
padding : "<?",
size : "<?",
value : "<"
}
} );
/** @ngInject */
function QrCodeControllerFactory( $element, QRious ) {
class QrCodeController {
constructor() {
const vm = this;
// Defaults
vm.background = "white";
vm.backgroundAlpha = 1.0;
vm.foreground = "black";
vm.foregroundAlpha = 1.0;
vm.level = "L";
vm.mime = "image/png";
vm.padding = null;
vm.size = 100;
vm.value = null;
vm.qrInstance = null;
}
$onInit() {
const vm = this;
vm.qrInstance = new QRious();
$element[ 0 ].appendChild( vm.qrInstance.image );
vm.__updateQrCode();
}
$onChanges() {
const vm = this;
vm.__updateQrCode();
}
/**
* @private
*/
__updateQrCode() {
const vm = this;
if( !vm.qrInstance ) {
return;
}
vm.qrInstance.set( {
background : vm.background,
backgroundAlpha : vm.backgroundAlpha,
foreground : vm.foreground,
foregroundAlpha : vm.foregroundAlpha,
level : vm.level,
mime : vm.mime,
padding : vm.padding,
size : vm.size,
value : vm.value
} );
}
}
return new QrCodeController();
}
For future reference, this should get people started :)
from qrious.
Related Issues (20)
- Error with unit test HOT 2
- Center the QR code, solution HOT 2
- SVG generation HOT 4
- 生成二维码的字符串很长 HOT 2
- Demo broken HOT 4
- Unicode characters not working HOT 3
- 二维码能展示,但是用微信等扫描图片就扫描不出来 HOT 1
- Custom pattern QR Generator scanner and reader like facebook messenger?
- Qrious do not work when canvas read is disabled for privacy reasons HOT 2
- Is this project dead? HOT 1
- password protected qr code HOT 4
- padding not null toDataUrl Picture not centered HOT 3
- Get access to underlying modules? HOT 2
- How can I append QR code to already existing canvas element?
- Question about the LEVEL value HOT 2
- TypeError: Cannot set property 'QRious' of undefined HOT 3
- QR Code Structure HOT 1
- QRious not found since upgrade Chrome to latest version HOT 4
- The QR Generation is not working I dont know why. Heres the error Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'returnValues') at addproduct.php:152:124 at async addproduct.php:150:25
- compatibility with C sharp in VB 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from qrious.