基于angular生成二维码

生成二维码主要是基于jquery的qrcode.js。通过qrcode加上ng生成二维码   这个例子github也有，本人为了以后学习方便就转载了。

index.html

<div class="key-padding key-padding-vertical">
    <h4>JS生成二维码。</h4>

<div style="text-align: center">
    <qr text="qrcodeString" type-number="typeNumber" correction-level="correctionLevel" size="size" input-mode="inputMode" image="image"></qr>
</div>
    <textarea class="form-control" ng-model="qrcodeString">

    </textarea>
</div>

ctrl.js

$scope.qrcodeString = 'YOUR TEXT TO ENCODE';
        $scope.size = 250;
        $scope.correctionLevel = '';
        $scope.typeNumber = 0;
        $scope.inputMode = '';
        $scope.image = true;

angular.modal

.controller('QrCtrl', ['$scope', function($scope){
        $scope.getTypeNumeber = function(){
            return $scope.typeNumber || 0;
        };

        $scope.getCorrection = function(){
            var levels = {
                'L': 1,
                'M': 0,
                'Q': 3,
                'H': 2
            };

            var correctionLevel = $scope.correctionLevel || 0;
            return levels[correctionLevel] || 0;
        };

        $scope.getText = function(){
            return $scope.text || '';
        };

        $scope.getSize = function(){
            return $scope.size || 250;
        };

        $scope.isNUMBER = function(text){
            var ALLOWEDCHARS = /^[0-9]*$/;
            return ALLOWEDCHARS.test(text);
        };

        $scope.isALPHA_NUM = function(text){
            var ALLOWEDCHARS = /^[0-9A-Z $%*+\-./:]*$/;
            return ALLOWEDCHARS.test(text);
        };

        $scope.is8bit = function(text){
            for (var i = 0; i < text.length; i++) {
                var code = text.charCodeAt(i);
                if (code > 255) {
                    return false;
                }
            }
            return true;
        };

        $scope.checkInputMode = function(inputMode, text){
            if (inputMode === 'NUMBER' && !$scope.isNUMBER(text)) {
                throw new Error('The `NUMBER` input mode is invalid for text.');
            }
            else if (inputMode === 'ALPHA_NUM' && !$scope.isALPHA_NUM(text)) {
                throw new Error('The `ALPHA_NUM` input mode is invalid for text.');
            }
            else if (inputMode === '8bit' && !$scope.is8bit(text)) {
                throw new Error('The `8bit` input mode is invalid for text.');
            }
            else if (!$scope.is8bit(text)) {
                throw new Error('Input mode is invalid for text.');
            }

            return true;
        };

        $scope.getInputMode = function(text){
            var inputMode = $scope.inputMode;
            inputMode = inputMode || ($scope.isNUMBER(text) ? 'NUMBER' : undefined);
            inputMode = inputMode || ($scope.isALPHA_NUM(text) ? 'ALPHA_NUM' : undefined);
            inputMode = inputMode || ($scope.is8bit(text) ? '8bit' : '');

            return $scope.checkInputMode(inputMode, text) ? inputMode : '';
        };
    }])
    .directive('qr', ['$timeout', '$window', function($timeout, $window){

        return {
            restrict: 'E',
            template: '<canvas ng-hide="image"></canvas><img ng-if="image" ng-src="{{canvasImage}}"/>',
            scope: {
                typeNumber: '=',
                correctionLevel: '=',
                inputMode: '=',
                size: '=',
                text: '=',
                image: '='
            },
            controller: 'QrCtrl',
            link: function postlink(scope, element, attrs){

                if (scope.text === undefined) {
                    throw new Error('The `text` attribute is required.');
                }

                var canvas = element.find('canvas')[0];
                var canvas2D = !!$window.CanvasRenderingContext2D;

                scope.TYPE_NUMBER = scope.getTypeNumeber();
                scope.TEXT = scope.getText();
                scope.CORRECTION = scope.getCorrection();
                scope.SIZE = scope.getSize();
                scope.INPUT_MODE = scope.getInputMode(scope.TEXT);
                scope.canvasImage = '';

                var draw = function(context, qr, modules, tile){
                    for (var row = 0; row < modules; row++) {
                        for (var col = 0; col < modules; col++) {
                            var w = (Math.ceil((col + 1) * tile) - Math.floor(col * tile)),
                                h = (Math.ceil((row + 1) * tile) - Math.floor(row * tile));
                            context.fillStyle = qr.isDark(row, col) ? '#000' : '#fff';
                            context.fillRect(Math.round(col * tile), Math.round(row * tile), w, h);
                        }
                    }
                };

                var render = function(canvas, value, typeNumber, correction, size, inputMode){
                    var trim = /^\s+|\s+$/g;
                    var text = value.replace(trim, '');

                    var qr = new QRCode(typeNumber, correction, inputMode);
                    qr.addData(text);
                    qr.make();

                    var context = canvas.getContext('2d');

                    var modules = qr.getModuleCount();
                    var tile = size / modules;
                    canvas.width = canvas.height = size;

                    if (canvas2D) {
                        draw(context, qr, modules, tile);
                        scope.canvasImage = canvas.toDataURL() || '';
                    }
                };

                render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);

                $timeout(function(){
                    scope.$watch('text', function(value, old){
                        if (value !== old) {
                            scope.TEXT = scope.getText();
                            scope.INPUT_MODE = scope.getInputMode(scope.TEXT);
                            render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);
                        }
                    });

                    scope.$watch('correctionLevel', function(value, old){
                        if (value !== old) {
                            scope.CORRECTION = scope.getCorrection();
                            render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);
                        }
                    });

                    scope.$watch('typeNumber', function(value, old){
                        if (value !== old) {
                            scope.TYPE_NUMBER = scope.getTypeNumeber();
                            render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);
                        }
                    });

                    scope.$watch('size', function(value, old){
                        if (value !== old) {
                            scope.SIZE = scope.getSize();
                            render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);
                        }
                    });

                    scope.$watch('inputMode', function(value, old){
                        if (value !== old) {
                            scope.INPUT_MODE = scope.getInputMode(scope.TEXT);
                            render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);
                        }
                    });
                });

            }
        };
    }])

好了在textarea中可以输入你的地址栏，注：暂不支持中文字符。