$ scope函数中的变量

Question

我必须在一个应用程序中拍摄几张照片，并且要使用Ionic和Angular进行拍摄。

我有3个按钮，每个按钮都要拍照。 这是HTML方面：

<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">

我有内联CSS没关系，这是一个测试。

这些是功能：其中3个，每个按钮一个。

    $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
      });
    }   

该功能的作用是：拍照，保存并在srcImage1 / 2/3 / etc下显示缩略图。

但是我只想一个功能，并从每个按钮调用它。

为此，我将代码更改为：

电话：

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

功能：

 $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");
  });   
}

但是，我打算执行常规功能的$scope.buscar不会更新缩略图。

alert(buscar); 完全显示了我的期望，但是$scope.buscar不会更新图像。 我不知道为什么它不起作用。

我找到了下一个解决方案：

  $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");
  });

只需用JS获取ID并替换src。 但是，@ Vladimir Zdenek的回答更加优雅，而且使用Angular-因此我将代码更改为该代码。 我接受他的回答是正确的。

Answer 1

您必须从以下位置更改对模板中图像的引用：

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

至

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

然后在您的函数中，更改以下行

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

对此

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

还请确保同时更改模板中的其他图像。

Answer 2

尝试在每次函数调用时清除“ imageData”的值。

var imageData =“”;