Implementing with angular.js

[neocotic]

Implementing with angular.js

[neocotic]

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! 🍀

[oliversalzburg]

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 :)