itsm-whlg/wechat/pcreq/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,
                                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'
                 })
                  };
                  
               
                }
            }
    })