$scope variable in function

Question

I have to take a few pictures in an app, I'm making it with Ionic and Angular.

I have 3 buttons and each has to take a picture. This is the HTML side:

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="takeImage1" 
 height="40" width="40" style="margin-right: 7px;" ng-click="Take">

<img ng-src="{{srcImage2 || 'img/foto_defecto.png'}}" id="srcImage2" 
height="40" width="40" style="margin-right: 7px;" ng-click="takeImage2">

<img ng-src="{{srcImage3 || 'img/foto_defecto.png'}}" id="srcImage3" 
height="40" width="40" style="margin-right: 7px;" ng-click="takeImage3">

Doesn't matter I have inline css, it's a test.

And these are the functions: 3 of them, one for each button.

    $scope.takeImage1 = function() {
      var options = {
        quality: 100,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: false,
        encodingType: Camera.EncodingType.PNG,
        targetWidth: 250,
        targetHeight: 250,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: true
      };

      $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.srcImage1 = "data:image/PNG;base64," + imageData;

      }, function(err) {
        // error
      });
    }   

What the function does is: takes the picture, saves it and it'll show a thumbnail under the srcImage1/2/3/etc.

However I want to have just ONE function and call it from each button.

For that I changed the code to this:

the call:

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="srcImage1" 
height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)">

the function:

 $scope.hacerFoto = function(numero) {          
    var options = {
        quality: 100,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: false,
        encodingType: Camera.EncodingType.PNG,
        targetWidth: 250,
        targetHeight: 250,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: true
    };
  var buscar = "srcImage".concat(numero);
  alert(buscar);
  $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.buscar = "data:image/PNG;base64," + imageData;
  }, function() {
        alert("error al hacer la foto");
  });   
}

However the $scope.buscar in my intent to make a general function won't update the thumbnail.

The alert(buscar); shows exactly what I'm expecting, however $scope.buscar won't update the image. I don't know why it wouldn't work.

I found a solution to this, which is the next one:

  $cordovaCamera.getPicture(options).then(function(imageData) {
        var image = document.getElementById('srcImage'+numero);
        image.src = "data:image/PNG;base64," + imageData;
  }, function() {
        alert("error al hacer la foto");
  });

Just take the ID with JS and replace the src. However, the answer from @Vladimir Zdenek is much more elegant and in Angular - so I changed my code to that. I accepted his answear as the correct one.

Answer 1

You have to change the reference to the image in your template from:

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="srcImage1" height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)">

to

<img ng-src="{{buscar1 || 'img/foto_defecto.png'}}" id="buscar1" height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)">

Then in your function, change the following line

$scope.buscar = "data:image/PNG;base64," + imageData;

to this

$scope['buscar' + numero] = "data:image/PNG;base64," + imageData;

Also make sure to change your other images in the template as well.