我的计划是使用API(例如Google Charts API)创建QR码,然后在我的网站上显示生成的QR码。我创建了一个从Google Chart API请求QR码图像的功能:
.controller('DealCtrl', function($scope, $http) {
$http.get("https://chart.googleapis.com/chart?cht=qr&chs=300x300&chl=160%20FSU728F29G&coe=UTF-8")
.success(function(data, status, headers, config) {
$scope.qrcode = data;
}).error(function(data, status, headers, config) {
$scope.qrcode = status;
});
})
当我尝试将响应绑定为HTML时,我得到了这个:
<div ng-bind-html="qrcode"></div>
响应似乎是一张图片(PNG)。我怎样才能在我的网站上显示这个内容?
答案 0 :(得分:1)
如果您因某些原因不想使用图片网址而想要根据内容创建图片,可以使用此图片:
$http.get(
"https://chart.googleapis.com/chart?cht=qr&chs=300x300&chl=160%20FSU728F29G&coe=UTF-8",
{responseType: 'blob'})
.then(function(response) {
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( response.data );
$scope.qrcode = '<img src="'+imageUrl+'"/>';
});
展示jsbin
信用转到@jan-miksovsky
答案 1 :(得分:0)
返回的数据似乎是HTML。因此,您需要使用ng-bind-html
指令
<div ng-bind-html="qrcode"></div>
&#13;
答案 2 :(得分:0)
以下是使用ng-bind-html http://jsbin.com/lifuparija/edit?html,js,output
的示例但如果没有更深入的例子说明你想要完成的事情,我觉得这只是在黑暗中拍摄的。
答案 3 :(得分:0)
您可以使用此directive
,然后在您的html代码中使用它。
create directive:
angular.module('av.qr', [])
.directive('avQr', function() {
return {
restrict: 'E',
template: '',
scope: {
image: '='
},
link: function(scope, elem, attr) {
var qrImage = angular.element(scope.image);
elem.append(qrImage);
}
}
})
然后在你的模块中注入这个带有模块名的指令,如下所示:
angular.module('my.module', ['av.qr'])
在您的控制器中将QR
图像附加到$scope
,如下所示:
.controller('DealCtrl', function($scope, $http) {
$http.get("https://chart.googleapis.com/chart? cht=qr&chs=300x300&chl=160%20FSU728F29G&coe=UTF-8")
.success(function(data, status, headers, config) {
$scope.qrcode = data;
}).error(function(data, status, headers, config) {
$scope.qrcode = status;
});
})
在您的HTML
代码中使用您的指令:
<av-qr image="qrcode"></av-qr>
**您将qrcode
图片传递给指令。