itsm-pc-handle/assets/js/directives/qrcode.js

'use strict';
app.directive('qrcanvas', function($modal) {
    return {
        restrict: 'EA',
        templateUrl: 'assets/views/means/tpl/print.html',
        // controller: 'meansCtrl',
        link: function(scope, element, attrs) {
            scope.stamp = function() {
                var modalInstance = $modal.open({
                    templateUrl: 'assets/views/means/tpl/uuidprint.html',
                    controller: function($scope, $modalInstance) {
                        // $scope.stamp = function(){
                        // $scope.uuid={};
                        $scope.stampable = true;
                        $scope.selected = scope.selected;
                        // $scope.stampables=[];
                        setInterval(function() {
                            if ($scope.stampable) {
                                $scope.stampable = false;
                                angular.forEach(scope.selected.items, function(item) {
                                    function $(selector) {
                                        return document.querySelector(selector);
                                    }
                                    $scope.q = $('.qrcanvas');
                                    var canvas;
                                    var colorIn = "#191970";
                                    var colorOut = "#cd5c5c";
                                    var colorFore = "#4169e1";
                                    var colorBack = "#ffffff";
                                    var options = {
                                        cellSize: 4,
                                        foreground: [
                                            // foreground color
                                            { style: colorFore },
                                            // outer squares of the positioner
                                            { row: 0, rows: 7, col: 0, cols: 7, style: colorOut },
                                            { row: -7, rows: 7, col: 0, cols: 7, style: colorOut },
                                            { row: 0, rows: 7, col: -7, cols: 7, style: colorOut },
                                            // inner squares of the positioner
                                            { row: 2, rows: 3, col: 2, cols: 3, style: colorIn },
                                            { row: -5, rows: 3, col: 2, cols: 3, style: colorIn },
                                            { row: 2, rows: 3, col: -5, cols: 3, style: colorIn },
                                        ],
                                        background: colorBack,
                                        data: [item.uuid, item.createtime],
                                        typeNumber: 1,
                                    };
                                    var effect = 'none';
                                    if (effect !== 'none') {
                                        options.effect = { key: effect, value: 1 };
                                        if (effect === 'image') {
                                            options.background = [colorBack, effectImg];
                                        }
                                    }
                                    // {{$index}} > 0 && {{$index}} % 2 == 0 ? 'page-break-before:always' : 'background:red'
                                    // $scope.q.tital=item.uuid;
                                    // $scope.q.textContent=item.uuid;
                                    options.reuseCanvas = canvas;
                                    canvas = qrgen.canvas(options);
                                    // canvas.outerText=item.uuid;
                                    // $scope.q.innerHTML=$scope.q.innerHTML+"<div class='col-md-2'>"+item.uuid+"</div>"
                                    $scope.q.appendChild(canvas);
                                    angular.element("canvas").addClass("canvasclass")
                                        // $scope.q.innerHTML=$scope.q.innerHTML+"<div class='col-md-2'>"+item.uuid+"</div>"
                                })
                            } else {

                            }
                        }, 500);
                        $scope.ok = function() {
                            // window.print();
                            $modalInstance.dismiss('cancel');
                        };

                        $scope.cancel = function() {
                            $modalInstance.dismiss('cancel');
                        };

                    },
                    size: 'lg'
                })
            };


        }
    }
})