由于现有的项目基于ng1.x版本的,根据战略需求,(当然重构也已经上日程);但是又需要维护和开发新功能以满足现有的用户需求,但是现有的插件或者组件不能满足当前需求,如二维码生成的需求!
这里推荐一个比较好用的https://github.com/jeromeetienne/jquery-qrcode
;
亲测好用!
次插件基于jquery的,所以需要将其做成指令的形式,代码如下:
angular.module('app', [])
.directive('qrCode', function() {
return {
restrict: 'A',
scope: true,
link : function(scope, ele, attrs) {
var params = new Function('return {' + attrs['qrCode'] + '}')();
jQuery(ele).qrcode(params);
}
};
});
用法:
//////////////////1.
<div qr-code="render: 'canvase',
width: 256, height: 256,
background: 'white', foreground: 'black',
text: ''http://localhost">
</div>
//////////////////2.
<div qr-code="render: 'table',
width: 128, height: 128,
background: '#eeeeee', foreground: 'green',
text: 'http://localhost'">
</div>
参数:
1.qr-code="render: 'canvase', 渲染出一个canvase;
2. width: 256, height: 256, 宽高设置;
3. background: '#eeeeee', 背景颜色;
4. foreground: 'green', 二维码颜色;
5. text: 'http://localhost'" 二维码扫出来的文本或链接地址;
因为所用的技术架构比较老,所以用这个。
如果是ng版本较高的话,有很多选择可以用,并且都比较好用!
网友评论