janantala / angular-qr Goto Github PK

View Code? Open in Web Editor NEW

210.0 16.0 89.0 59 KB

Dynamic QR code generator for AngularJS

Home Page: http://janantala.github.io/angular-qr/demo/

License: MIT License

JavaScript 100.00%

angular-qr's Introduction

angular-qr v0.2.0

QR code generator for AngularJS

Demo

Check out http://janantala.github.io/angular-qr/demo/

Requirements

AngularJS v 1.0+
qrcode.js (bower install qrcode is installed with angular-qr as dependecy)

Usage

We use bower for dependency management. Add

dependencies: {
    "angular-qr": "latest"
}

To your bower.json file. Then run

bower install

This will copy the angular-qr files into your bower_components folder, along with its dependencies. Load the script files in your application:

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/qrcode/lib/qrcode.min.js"></script>
<script type="text/javascript" src="bower_components/angular-qr/angular-qr.min.js"></script>

Add the ja.qr module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ja.qr']);

Directive

$scope.string = 'YOUR TEXT TO ENCODE';

<qr text="string"></qr>

<qr type-number="8" correction-level="'M'" size="200" input-mode="'ALPHA_NUM'" text="string" image="true"></qr>

Required attributes

text

Your text to encode from variable in the scope. If you want to encode text directly you need to escape it text="'YOUR TEXT TO ENCODE'".

Optional attributes

type-number

1-40
default value: 0 = minimal required version

correction-level

L - Low
M - Medium (default)
Q - Quartile
H - High

size

Size in pixels

default value: 250

input-mode

NUMBER: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
ALPHA_NUM: *0–9, A–Z (upper-case only), space, $, %, , +, -, ., /, :
8bit: ISO 8859-1
default value: minimal required input mode based on input text

image

If you want to render qr code into image element set this attribute to true.

Contributing

Contributions are welcome. Please make a pull request against canary branch, use Git Commit Message Conventions and do not bump versions. Also include tests.

Testing

We use karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use gulp:

npm install -g gulp
npm install
bower install
gulp

The karma task will try to open Chrome as a browser in which to run the tests. Make sure this is available or change the configuration in karma.conf.js

License

The MIT License

angular-qr's People

Contributors

Stargazers

Watchers

Forkers

vpixle josefjezek ardani pratyush-sngh dimd13 ahashem irjudson ronnieoverby toobeloong aussiehash nvdnkpr nileshkadam07 codeloversat gpndata systembugtj qinwenshi recmo danic89 obrzezna dirbaio manasgosavi garciat splaktar angularian pkdevbox zjxpsetp maxkunitsa 13122310958 lykmapipo prasanthrubyist miyakeryo trenchmortar jp-lalinde jametslopez xoccam 19317362 willyscampos ravikannankr leojim stekac feruzm anilparikipandla davduran msn0 ciportugal thigas88 willimjian maheshsaini89 aryak007 cutezjz edu1525 go2hyder wongcheehoo chinwuen agshealth-dineshkumar arjunnagraj dev-mansonthomas devops-poc mcnacho wolf-mtwo saddam1997 richfergus 823639792 christian-klein-berud geancarlou divairanga masterofhorror yahyameo ferhatseyrek taufik1207 almaro90 cvgknr davidscorpsia malinduruwanthamuthumala dmaf87 priya1692 josesaribeiro cryptobuks cebolamadlaba afzal-gour aarushverma96 renzo-ezagui bogdoslavik void-lab-bot erisavitija gastromatic airship-x nfmorales fretzmorales

angular-qr's Issues

ng-if is not working for me. I had to use ng-show instead...

In the directive, here is the line I had to use, for the template, to make it work:

<canvas ng-hide="image"></canvas><img ng-show="image" ng-src="{{canvasImage}}"/>

This is not really great in term of performance...

With the ng-if, the canvas and the image were shown. Actually the ng-if was not working for me...

How to include the generated QR Code in an email(Gmail) body?

I'm using Ionic's ng-cordova social sharing plugin to generate a pre-filled email to send.

I want to include the QR Code I'm generating using angular-qr. It seems that Gmail is blocking it due to the lack of a src=" " attribute in the ` tag.

Any ides for a way around this?

Requires 1.2 version of angular

I'm using 1.3 in my project, could angular dependency be something like "angular": ">=1" if module really should work on any 1.x version?

Publish to NPM

Please publish this package to npm repository.

Change color of QR?

Hi there...

In the proyect I'm working we need to change the color of the QR. Is there an option to do this??

Thanks

Error when trying to use directive with angular 1.3

Trying to make simple QR code failed.

<qr text="ABC"></qr>

Error: The `text` attribute is required.
    at postlink (build/debug/vendor/angular-qr/angular-qr.js:98:17)
    at build/debug/vendor/angular/angular.js:6923:44
    at nodeLinkFn (build/debug/vendor/angular/angular.js:6515:13)
    at compositeLinkFn (build/debug/vendor/angular/angular.js:5926:15)
    at publicLinkFn (build/debug/vendor/angular/angular.js:5831:30)
    at build/debug/vendor/angular-ui-router/release/angular-ui-router.js:2805:9
    at nodeLinkFn (build/debug/vendor/angular/angular.js:6515:13)
    at compositeLinkFn (build/debug/vendor/angular/angular.js:5926:15)
    at publicLinkFn (debug/vendor/angular/angular.js:5831:30)
    at updateView (build/debug/vendor/angular-ui-router/release/angular-ui-router.js:2733:23) <qr text="ABC" class="ng-scope ng-isolate-scope">

angular.js:4631 Uncaught Error: [$injector:modulerr] Failed to instantiate module poll due to:
Error: [$injector:modulerr] Failed to instantiate module ja.qr due to:
Error: [$injector:nomod] Module 'ja.qr' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

in my bower components i have qrcode ,qrcode.js and angular-qr

solve as possible as fast

Encode error in qrcode library

There is an encode error in the library janantala/qrcode.js#9

Could you help to provide webpack support?

Download QR code image

I was wondering if could download the generated QR code as an image, I am using ionic framework and could not found hot this can be done.

Does not work in environment with require.js

On our page we use both angular and require.js. This package depends on qrcode.js setting its main function in global, but in presence of define, qrcode.js exports itself as a module. Alas angular-qr tries to call undefined, which tends not to work.

Or I'm doing something wrong, which is always an option.

scope variable isnot recognized as valid text

Directive:
scope.qrData = 'http://' + scope.assignedIp + ':8002/#/instrumentState';

"scope.assignedIP" is the current assigned IP of the PC.

HTML:
<qr size="100" text="qrData"></qr>

Error:
Error: The text attribute is required.
at Object.postlink [as link]

Findings so far:
I have tried several other scope variables on this page and none of these is working.
A simple String is working. (<qr size="50" text="'simpleString'"></qr>).
So I guess, I installed the package correctly.

Error: The `text` attribute is required. Not working in Promise.

Problem

.controller('QrcodeCtrl', function ($scope, $stateParams, Post) {
            $scope.box = {};

            Post.qrcode($stateParams.postId).success(function(data) {
                $scope.post = data;
            });
        })

I've tried $rootScope also nothing works in a promise.
View:

<qr text="post.qrcode" size="size"></qr>

Works

.controller('QrcodeCtrl', function ($scope, $stateParams) {

            $scope.qrcode = 'test';
        })

View:

<qr text="qrcode" size="size"></qr>

Error: The `text` attribute is required.

I keep receiving these errors:

Any idea?

Image rendering option

Allow qr code to render into img element.

Does not work inside ng-repeat

<!DOCTYPE html>
<html ng-app="APP">
<head>
    <meta charset="UTF-8">
    <title>angular-qr example</title>

</head>
<body>
    <div ng-repeat="x in ['hello', 'world']">
      <qr type-number="0" correction-level="'M'" size="200" input-mode="'ALPHA_NUM'" text="{{x}}"></qr>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="/application/html/js/janantala/angular-qr/qrcode.js"></script>
    <script src="/application/html/js/janantala/angular-qr/angular-qr.js"></script>

    <script>
    angular.module("APP",["ja.qr"])
    </script>
</body>
</html>

/*TEAM CONTROLLER*/
function TeamCtrl($scope, $localStorage) {
  $scope.user = $localStorage.getObject("user");
  console.log($scope.user);

  $scope.qrcodeString = $scope.user.team;

  console.log($scope.qrcodeString);

}
TeamCtrl.$inject = ['$scope', '$localStorage'];

<ion-view view-title="Team">
  <ion-content>

    <h1>Hola</h1>
    <qr type-number="8" correction-level="'M'" size="200" input-mode="'AUTO'" text="qrcodeString" image="true"></qr>

  </ion-content>
</ion-view>

QR code not working

l got the code appearing however my scanner won't pick it up but picks other codes up.

the code is below

any idea?