一 引用文件

//index.html
 <script src="lib/qrcode/jquery.min.js"></script>
 <script src="lib/qrcode/qrcode.js"></script>

链接: https://pan.baidu.com/s/1skLb1Rv 密码: bt19

二 编码

html 核心代码

<input type="text" placeholder="扫出来的值" ng-model="urlData.url">
<button class="button button-calm" style="margin: 5px;height: 50px;" ng-click="qrCode()">生成</button>

controller

/**
 * Created by xiehan on 2017/12/13.
 */
angular.module('studyApp.controllers')

  .controller('QrCodeCtrl', function ($scope, $sce,$rootScope,$ionicHistory, $location) {
    $scope.title = '二维码生成';

    $scope.goBack = function () {
      $ionicHistory.goBack();
    };

    $scope.urlData={
      url:''
    };

    //初始化二维码宽高
    var qrcode = new QRCode(document.getElementById("qrcode"), {
      width: 200,
      height: 200,
      colorDark : '#000000', // 前景色
      colorLight : '#ffffff', // 背景色
      correctLevel : QRCode.CorrectLevel.H //L M Q H
    });

    $scope.qrCode=function(){
      qrcode.makeCode($scope.urlData.url);
    }
  });

三 封装成指令

/**
 * Created by xiehan on 2017/12/13.
 */
angular.module('studyApp.directives')
  .directive('qrcode', function ($compile,$timeout) {
    return {
      restrict: 'AE',
      scope: {
        url: '='
      },
      template: ' <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px;">'+
      '<div id="qrcode""></div></div>',
      replace: true,
      transclude: true,
      link: function ($scope, element, attrs) {
        $compile(element.contents())($scope);

        //初始化二维码样式
        var qrcode = new QRCode(document.getElementById("qrcode"), {
          width: 200,
          height: 200,
          colorDark : '#000000', // 前景色
          colorLight : '#ffffff', // 背景色
          correctLevel : QRCode.CorrectLevel.H //L M Q H
        });

        qrcode.makeCode($scope.url);

      }
    }
  });

html中只要这样写就可以了

<qrcode url="urlData.url"></qrcode>

四 效果图

效果图.png