Request Qr Code And Show The Image Using Angular Js

My plan is to create a QR code by using an API (such as Google Charts API) and then show the generated QR code on my website. I created a function that requests a QR Code image fro

Solution 1:

If you don't want to use the image url as is for some reason and you want to create the image from the contents you can use this:

$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+'"/>';

});

demonstrating jsbin

Credit goes to @jan-miksovsky

Solution 2:

The returned data seems to be HTML. So you need to inject the Google HTML into your page, using ng-bind-htmldirective :

<divng-bind-html="qrcode"></div>

Solution 3:

Here is an example of using ng-bind-html http://jsbin.com/lifuparija/edit?html,js,output

But without a more in depth example of what you are trying to accomplish, I feel like this is just a shot in the dark.